// Author    : Chris Smith
// Copyright : 2009 Silver Maple Studio
// Date      : 12 May 2009
// Filename  : main.js
// Purpose   : Contains all javascript needed for each page for Old Patagonia Pottery

// Only Load Script after page has loaded
window.onload = loadFunctions;

/* **********************************************************************
   *           Global Variables:  These variables are accessible        *
   *                              anywhere in this script.              *
   ********************************************************************** */

// Create a string variable pageTitle and assign it to the document title
// This is what is in between the <title> </title> tags.
var pageTitle = document.title;

// Create a boolean variable that is set to 1 when user reaches end of gallery
var isAtEnd = 0;

// Create a boolean variable that is set to 1 when user reaches beginning of gallery
var isAtBeginning = 0;

// Create a boolean variable that is set to 1 when user is on gallery page, and set to 0 otherwise
var isGallery = 0;

// Create a variable array to be set accordingly to the gallery
var myPix = new Array();

// If PageTitle contains the Floral Gallery then create myPix array with Floral images
if (pageTitle == "Old Patagonia Pottery - Floral Gallery") {
   myPix = Array("gallery/Floral/floral1.jpg", "gallery/Floral/floral2.jpg", "gallery/Floral/floral3.jpg",
       "gallery/Floral/floral4.jpg", "gallery/Floral/floral5.jpg", "gallery/Floral/floral6.jpg", "gallery/Floral/floral7.jpg",
       "gallery/Floral/floral8.jpg", "gallery/Floral/floral9.jpg", "gallery/Floral/floral10.jpg", "gallery/Floral/floral11.jpg",
       "gallery/Floral/floral12.jpg", "gallery/Floral/floral13.jpg", "gallery/Floral/floral14.jpg", "gallery/Floral/floral15.jpg",
       "gallery/Floral/floral16.jpg");
   isGallery = 1;
}
// else if PageTitle contains the Animal Gallery then create myPix array with Animal images
else if (pageTitle == "Old Patagonia Pottery - Animal Gallery") {
   myPix = Array("gallery/Animal/animal1.jpg", "gallery/Animal/animal2.jpg", "gallery/Animal/animal3.jpg",
       "gallery/Animal/animal4.jpg", "gallery/Animal/animal5.jpg", "gallery/Animal/animal6.jpg", "gallery/Animal/animal7.jpg",
       "gallery/Animal/animal8.jpg");
   isGallery = 1;
}
// else if PageTitle contains the Mankind Gallery then create myPix array with Mankind images
else if (pageTitle == "Old Patagonia Pottery - Mankind Gallery") {
   myPix = Array("gallery/Man/man1.jpg", "gallery/Man/man2.jpg", "gallery/Man/man3.jpg",
       "gallery/Man/man4.jpg", "gallery/Man/man5.jpg", "gallery/Man/man6.jpg", 
       "gallery/Man/man8.jpg");
   isGallery = 1;
}
// else don't declare array and do nothing
else {
    // Do nothing
    isGallery = 0;
}

// Declare variable thisPic to keep track of the picture count and initialize it to 0.
var thisPic = 0;

/* *****************************************************
   *               Function loadFunctions()            *
   ***************************************************** */

// Purpose: The purpose of this function is to load every function
// which needs to be loaded on window.load.  Since only one window.load
// command is allowed per page this function will allow the loading of
// multipe functions.  To add a function just add the function call
// to this function.

function loadFunctions() {
    rolloverInit();
    if (isGallery) {
        initSlideshow();
    }
}


/* *****************************************************
   *                Function rolloverInit()            *
   ***************************************************** */

// Purpose:  The purpose of this function is to search all
//           images on the page and then check to see if the
//           image is encapsulated by the anchor tag <a>.
//           For each image that has the anchor node as its' parent
//           the function setupRollover is called.  The function
//           setupRollover will modify the image properties to use the
//           default image when the mouse pointer is not on the image,
//           and then use a different image when the mouse pointer is
//           on or hovering over the image.
//
//  Input:  All Images on a page - see for loop
//
//  Output: Send the Images that are encapsulated by the anchor tag
//          to the the function setupRollover.

function rolloverInit() {
    for (var ctr = 0; ctr < document.images.length; ctr++) {
        if (document.images[ctr].parentNode.tagName == "A") {
            setupRollover(document.images[ctr]);
        } // end if (document.images[ctr].parentNode.tagName == "A")
    } // end for (var ctr=0; ctr<document.images.length; ctr++)
} // end function

/* *****************************************************
   *                Function setupRollover()           *
   ***************************************************** */

// Purpose: The purpose of this function is to take an image that is
//          encapsulated by the anchor tag and apply two new properties
//          or objects to the image (outImage, and overImage).
//
// Input: Image from rolloverInit
//
// Output: Rollover affect for images that are encapsulated with the anchor tag

function setupRollover(thisImage) {

    // Mouse goes off of Image
    thisImage.outImage = new Image();
    thisImage.outImage.src = thisImage.src;
    thisImage.onmouseout = function() {
        this.src = this.outImage.src;
    }

    // Mouse is on the Image
    thisImage.overImage = new Image();
    thisImage.overImage.src = "images/" + thisImage.id + "_on.png";
    thisImage.onmouseover = function() {
        if ((isAtBeginning) && (thisImage.id == "buttonLeftArrow")) {
            // If at the beginning of the slideshow keep the left arrow button
            // the same image as the out image.  This gives the affect that
            // the user can not go any further, and the images don't wrap around.
            // This case takes care of all cases except when the mouse is clicked,
            // from slide 1 to tranistion to slide 0 (the beginning).  The code
            // for the mouse click is within the processPrevious() function.
            this.src = this.outImage.src;
        }
        else if ((isAtEnd) && (thisImage.id == "buttonRightArrow")) {
            // If at the end of the slideshow make the right arrow button
            // the same image as the out image.  This gives the affect that
            // user can not go any further, and the images don't wrap around.
            // This case takes care of all cases except when the mouse is clikced,
            // from the next to last slide, to transition to the last slide (the end).
            // The code for the mouse click is within the processNext() function.
            this.src = this.outImage.src;
        }
        else {
            // For all other images replace the current image with the mouse over image.
            // This produces a rollover affect.
            this.src = this.overImage.src;
        }
    }

            
}

/* *****************************************************
   *                Function initSlideshow()           *
   ***************************************************** */

// Purpose:  The purpose of this function is to initialize the slide show.
//           Since thisPic is initialized to 0, the variable isAtBeginning is
//           set to 1.  When the left arrow is clicked the function processPrevious
//           is called.  Also when the right arrow is clicked the function
//           processNext is called

function initSlideshow() {
    if (thisPic == 0) {
        isAtBeginning = 1;
    }
    else {
        isAtBeginning = 0;
    }
    document.getElementById("leftArrow").onclick = processPrevious;
    document.getElementById("rightArrow").onclick = processNext;
}

/* *****************************************************
   *              Function processPrevious()           *
   ***************************************************** */

// Purpose:  The purpose of this function is to decrement the picture index count (thisPic) by
//           1 until the beginning of the slideshow is reached.  The slide show is a non-wrapping
//           slideshow, so when the user gets to the beginning he/she will be able to go no further.

function processPrevious() {

    // leftArrowImgObj is retrived by the document.getElementById method
    var leftArrowImgObj = document.getElementById("buttonLeftArrow");

    // Reset the variable isAtEnd if the left arrow is clicked and the last
    // picture was shown.
    if (thisPic == (myPix.length - 1)) {
        isAtEnd = 0;
    }
   
    // Boundary Condition for Slideshow.  If Picture number is 0, don't decrement any further    
    if (thisPic == 0) {
        isAtBeginning = 1;
    }
    // Coming back from the 1st picture will mean that user is at the lower boundary
    else if (thisPic == 1) {
        isAtBeginning = 1;
        leftArrowImgObj.src = "images/" + leftArrowImgObj.id + ".png";
        thisPic--;
    }
    // Decrement the picture index
    else {
        thisPic--;
    }
    
    // Display the current picture
    document.getElementById("myPicture").src = myPix[thisPic];
    // Return false (do not execute the html that encapsulates the picture image above)
    // In this case don't go to another page.
    return false;
}

/* *****************************************************
   *                  Function processNext()           *
   ***************************************************** */

// Purpose:  The purpose of this function is to increment the picture index count (thisPic) by
//           1 until the end of the slideshow is reached.  The slide show is a non-wrapping
//           slideshow, so when the user gets to the end he/she will be able to go no further.

function processNext() {

    // Right Arrow Image Object is retrieved by the document.getElementById method
    var rightArrowImgObj = document.getElementById("buttonRightArrow");

    // This conditional block of code will reset the isAtBeginning variable
    // to 0 when the slide show index starts from the beginning and then the
    // right arrow is pressed.
    if (thisPic == 0) {
        isAtBeginning = 0;
    }

    // Since the numbering of pictures starts with 0, the next to last picture
    // is myPix.length - 2.  If the right arrow button is clicked and the user
    // was on the next to last picture the user is now at the end of slideshow.
    // 
    if (thisPic == (myPix.length - 2)) {
        isAtEnd = 1;
        rightArrowImgObj.src = "images/" + rightArrowImgObj.id + ".png";
        thisPic++;
    }
    // Since the user is already at the end of slide show stop incrementing
    // thisPic index and do nothing.  The isAtEnd variable is still 1 in
    // this case.
    else if (thisPic == (myPix.length - 1)) {
        // Do Nothing
    }
    // Increment the Picture index by 1 if the other two cases are not met
    else {
        thisPic++;
    }
    // Display the current picture
    document.getElementById("myPicture").src = myPix[thisPic];
    // Return false (do not execute the html that encapsulates the picture image above)
    // In this case don't go to another page.    
    return false;
}