/**
 * image_gallery.js
 *
 * This script can be used in image gallery pages with 
 * thumbnails and a larger image to switch the larger view depending 
 * on which thumbnail image browse arrow the user clicks 
 * on the page.
 *
 * =================================
 * The client must do the following:
 * =================================
 * (1) Define three arrays (example at end of this file):
 * - imgPath   => full or relative URL path to the image, 
 *             -> not including the file extension.
 * - imgTitle  => the title/caption/label of the image
 * - imgActive => (true|false)
 * (2) Define the HTML for thumbnails, whose id is "thumbN", 
 *     where N is the index of the image in the image arrays.
 *     Also define an anchor around the thumbnail which calls
 *     the function "javascript:imageClick(N);", where
 *     the N is the index of the image in the arrays.
 * (3) Define a larger image with a name attribute of "large"
 * (4) Define a left arrow image with a link that calls 
 *     arrowClick('down')
 * (5) Defined a right arrow image with a link that calls 
 *     arrowClick('up')
 * 
 * =================
 * Optional features:
 * =================
 * (1) A last or double-arrow link/image that makes the following call:
 *     "javascript:imageClick(getHighestActiveIndex());"
 * (2) A "first" or double-left-arrow link/image that makes the following call:
 *     "javascript:imageClick(getLowestActiveIndex());"
 */
var imgPath   = new Array();
var imgTitle  = new Array();
var imgActive = new Array();

// This defines the default source of the preview image and the thumbs
function populateImages()
{
    var firstIndex = getLowestActiveIndex();
    document.images['large'].src    = imgPath[firstIndex]+".jpg";
    document.images['large'].alt    = imgTitle[firstIndex];
    document.images['large'].title  = imgTitle[firstIndex];
    for (var i = firstIndex; i < imgPath.length; i++)
    {
        var img = document.getElementById('thumb'+i);
        if (img !== null && imgActive[i])
        {
            img.src = imgPath[i]+".gif";
            if (imgTitle[i] !== null)
            {
                img.alt = imgTitle[i];
                img.title = imgTitle[i];
            }
        }
    }
}

// This defines what to do when an image is clicked on 
var selectedImg = 0;
function imageClick(index)
{
    document.images['large'].src = imgPath[index]+".jpg";
    document.images['large'].alt = imgTitle[index];
    document.images['large'].title = imgTitle[index];
    selectedImg = index;
}

// This defines what to do when an arrow is clicked on 
function arrowClick(direction)
{
    if (direction == 'up')
    {
        selectedImg = getNextActiveIndex(selectedImg);
    }
    else if (direction == 'down')
    {
        selectedImg = getPrevActiveIndex(selectedImg);
    }
    document.images['large'].src = imgPath[selectedImg]+".jpg";
    document.images['large'].alt = imgTitle[selectedImg];
    document.images['large'].title = imgTitle[selectedImg];
}

// returns the index of last image which is active.
function getHighestActiveIndex()
{
    var index = imgActive.length - 1;
    for (var i = imgActive.length - 1; i >= 0; i--)
    {
        if (imgActive[i])
        {
            index = i;
            break;
        }
    }
    return index;
}

// returns the index of first image which is active.
function getLowestActiveIndex()
{
    var index = 0;
    for (var i = 0; i < imgActive.length; i++)
    {
        if (imgActive[i])
        {
            index = i;
            break;
        }
    }
    return index;
}

// returns the index of the next-lower active image
function getPrevActiveIndex(currentIndex)
{
    var lowest = getLowestActiveIndex();
    var highest = getHighestActiveIndex();
    var index = (currentIndex == lowest ? highest : currentIndex - 1);
    var found = false;
    var count = 1;
    while (!found && (count <= imgActive.length))
    {
        if (imgActive[index])
        {
            found = true;
        }
        else
        {
            index = (index == lowest ? highest : index - 1);
            count += count;
        }
    }
    return (found ? index : currentIndex);
}

// returns the index of the next-higher active image
function getNextActiveIndex(currentIndex)
{
    var highest = getHighestActiveIndex();
    var index = (currentIndex == highest ? 0 : currentIndex + 1);
    var found = false;
    var count = 1;
    while (!found && (count <= imgActive.length))
    {
        if (imgActive[index])
        {
            found = true;
        }
        else
        {
            index = (index == highest ? 0 : index + 1);
            count += count;
        }
    }
    return (found ? index : currentIndex);
}

/* **********************************************
 * (1) Put the following in your page header
 * (2) Call populateImages() on load of the page.
 * **********************************************
 */

// *********************************************************
// ** IMPORTANT NOTE ON MAINTAINING THIS PAGE: *************
// *********************************************************
// To add or remove images, alter the following three array
// values as indicated here:
// (1) imgPath => the image file base name (not the extension)
// (2) imgTitle => the image title or name (used in alt and title properties)
// (3) imgActive => if true, the image will be displayed, 
//                  if false, the image will be hidden.
//
//
// It is assumed that the extensions for images are as follows:
// - thumbnails => ".gif"
// - large image => ".jpg" 
//
// If you need more than the given number of images on the
// page, you will need to add definitions for all three arrays
// starting with the last element. 
// 
// While you do not need to keep active images in a 
// contiguous sequence (i.e., 1, 2, 3, 4,...), you must
// still maintain the thumbnails such that no gaps appear 
// and the javascript href in the anchor around the thumbs 
// should only point to the appropriate image. 
// Do this as follows:
// - Change the "id" attribute of the <img> tag to "thumbN",
//   where "N" is the index of the array for the desired image. 
// - Change the value passed to the imageClick() function 
//   in the anchor tag to be the index of the array for
//   the desired image.  
// *********************************************************

// populate the image arrays...
//var imgDir = "../images/products/";
//imgPath[0]  = imgDir + "image01";
//imgTitle[0] = "Antique Heart Pine-Hand Scraped";
//imgActive[0] = true;
//imgPath[1]  = imgDir + "image02";
//imgTitle[1] = "Antique Heart Pine-Clear Vertical Grain";
//imgActive[1] = true;
//imgPath[2]  = imgDir + "image03";
//imgTitle[2] = "Antique Heart Pine";
//imgActive[2] = true;
//imgPath[3]  = imgDir + "image04";
//imgTitle[3] = "Antique Heart Pine-Narrow Plank";
//imgActive[3] = true;
//imgPath[4]  = imgDir + "image05";
//imgTitle[4] = "Antique Heart Pine-Wide Plank";
//imgActive[4] = true;
//imgPath[5]  = imgDir + "image06";
//imgTitle[5] = "Antique Hemlock Mushroom Board";
//imgActive[5] = true;
//imgPath[6]  = imgDir + "image07";
//imgTitle[6] = "Antique Oak";
//imgActive[6] = true;
//imgPath[7]  = imgDir + "image08";
//imgTitle[7] = "Antique Red and White Oak";
//imgActive[7] = true;
//imgPath[8]  = imgDir + "image09";
//imgTitle[8] = "Character Ash";
//imgActive[8] = true;
//imgPath[9]  = imgDir + "image10";
//imgTitle[9] = "Character Butternut";
//imgActive[9] = true;
//imgPath[10]  = imgDir + "image11";
//imgTitle[10] = "Character Cherry";
//imgActive[10] = true;
//imgPath[11]  = imgDir + "image12";
//imgTitle[11] = "Character Hickory";
//imgActive[11] = true;
//imgPath[12]  = imgDir + "image13";
//imgTitle[12] = "Character Red Birch";
//imgActive[12] = true;
//imgPath[13]  = imgDir + "image14";
//imgTitle[13] = "Character Red Oak";
//imgActive[13] = true;
//imgPath[14]  = imgDir + "image15";
//imgTitle[14] = "Character White Oak";
//imgActive[14] = true;
//imgPath[15]  = imgDir + "image16";
//imgTitle[15] = "Mushroom Board-Rustic Finish";
//imgActive[15] = true;
//imgPath[16]  = imgDir + "image17";
//imgTitle[16] = "Wire-brushed Barn Siding";
//imgActive[16] = true;
//imgPath[17]  = imgDir + "image18";
//imgTitle[17] = "";
//imgActive[17] = false;
//imgPath[18]  = imgDir + "image19";
//imgTitle[18] = "";
//imgActive[18] = false;
//imgPath[19]  = imgDir + "image20";
//imgTitle[19] = "";
//imgActive[19] = false;
//imgPath[20]  = imgDir + "image21";
//imgTitle[20] = "";
//imgActive[20] = false;
//imgPath[21]  = imgDir + "image22";
//imgTitle[21] = "";
//imgActive[21] = false;
//imgPath[22]  = imgDir + "image23";
//imgTitle[22] = "";
//imgActive[22] = false;
//imgPath[23]  = imgDir + "image24";
//imgTitle[23] = "";
//imgActive[23] = false;
//imgPath[24]  = imgDir + "image25";
//imgTitle[24] = "";
//imgActive[24] = false;
//imgPath[25]  = imgDir + "image26";
//imgTitle[25] = "";
//imgActive[25] = false;
//imgPath[26]  = imgDir + "image27";
//imgTitle[26] = "";
//imgActive[26] = false;
//imgPath[27]  = imgDir + "image28";
//imgTitle[27] = "";
//imgActive[27] = false;
//imgPath[28]  = imgDir + "image29";
//imgTitle[28] = "";
//imgActive[28] = false;
//imgPath[29]  = imgDir + "image30";
//imgTitle[29] = "";
//imgActive[29] = false;