//======================================================================
// PhotoGallery(Photos)
//
// The class constructor. Passed an array of associative arrays (hashes)
// containint photos with a key 'photo' and 'thumb'. Sets the pointer
// which all math is done against, to the first photo.
//======================================================================
function PhotoGallery(Photos)
{
    this.photos  = Photos;
    this.pointer = 0;
    this.init    = false;
}

//======================================================================
// getPhotos(index)
//
// Returns either the array of photos that the object is maintaining, or
// a specific photo if requested. These are image data, not elements
// on the document.
//======================================================================
PhotoGallery.prototype.getPhotos = function(index)
{
    if ( typeof(index) != 'undefined' ) {
        // This causes the call to 'wrap' if the want a photo index above
        // what really exists.
        var safeIndex = index % this.photos.length;
        return this.photos[safeIndex];
    } else return this.photos;
}

//======================================================================
// getPointer()
//
// Get the index of the current active photo.
//======================================================================
PhotoGallery.prototype.getPointer = function()
{
    return this.pointer;
}

//======================================================================
// setPointer(v)
//
// Sets the internal pointer to which is the displayed photo.
//======================================================================
PhotoGallery.prototype.setPointer = function(v)
{
    this.pointer = v;
}

//======================================================================
// drawLayout()
//
// This writes the gallery into the document at the location that this
// function was called.
//======================================================================
PhotoGallery.prototype.drawLayout = function()
{
    this.makeGalleryTable();
    this.buildTableStructure();
    this.registerCallbacks();
}

//======================================================================
// makeGalleryTable()
//
// Writes to the document a table that can be used to work off of inside
// the document.
//======================================================================
PhotoGallery.prototype.makeGalleryTable = function()
{
    document.write('<table id="PHOTO_TABLE"></table>');
    this.table             = document.getElementById('PHOTO_TABLE');
    this.table.style.width = '80%';
    this.table.align       = 'center';
    return this.table;
}

//======================================================================
// getThumbCount()
//
// Returns how many Thumbs are being shown/maintained.
//======================================================================
PhotoGallery.prototype.getThumbCount = function()
{
    var count = this.photos.length;
    return count;
}

//======================================================================
// buildTableStructure()
//
// After the table was created into the document start making the
// elements inside that table to display the gallery with.
//======================================================================
PhotoGallery.prototype.buildTableStructure = function()
{
    // Build all of the structural elements.
    var Table      = this.table;
    var Row        = Table.insertRow(0);
    var MainCell   = Row.insertCell(0);
    var ThumbCell  = Row.insertCell(1);

    // Create the main image that is displayed at full size
    var MainImage   = document.createElement('img');
    var MainCaption = document.createElement('div');
    MainCell.appendChild(MainImage);
    MainCell.appendChild(MainCaption);

    // Create a table to hold the caption and "up" navigation.
    var CaptionTable = document.createElement('table');
    var CaptionRow   = CaptionTable.insertRow(0);
    var CaptionCell  = CaptionRow.insertCell(0);
    var UpNavRow     = CaptionTable.insertRow(1);
    var UpNavCell    = UpNavRow.insertCell(0);
    var DownNavTable = document.createElement('table');
    var DownNavRow   = DownNavTable.insertRow(0);
    var DownNavCell  = DownNavRow.insertCell(0);

    // Add a caption and scrolling controls.
    CaptionCell.innerHTML = '<div align="center">Click on Photos Enlarge</div>';
	if (this.getThumbCount() > 3) {
    UpNavCell.innerHTML   = '<div align="center"><img src="/directory/includes/gray_up.gif" style="cursor: pointer;" onclick="cycleUp();"></div>';
    DownNavCell.innerHTML = '<div align="center"><img src="/directory/includes/gray_down.gif" style="cursor: pointer;" onclick="cycleDown();"></div>';
    }

    // Create a table to hold the thumbs.
    var ThumbTable  = document.createElement('table');

    // Populate the table with 3 thumbs cells to hold the thumbs.
   // for ( var i = 0; i < this.getThumbCount(); i++ ) {
	var high_num = this.getThumbCount();
	if (high_num > 3) {
	high_num = 3;
	}
   for ( var i = 0; i < high_num; i++ ) {     
   // Create the row, data cell, and image for this thumb.
        var Row   = ThumbTable.insertRow(i);
        var Cell  = Row.insertCell(0);
        var Thumb = document.createElement('img');
        Thumb.id = 'THUMB_' + i;
        Thumb.style.cursor = 'pointer';
        Cell.appendChild(Thumb);
    }

    // Attach the ThumbTable to the document.
    ThumbCell.appendChild(CaptionTable);
    ThumbCell.appendChild(ThumbTable);
    ThumbCell.appendChild(DownNavTable);
    MainCell.align         = 'center';
    MainCell.width         = '450';
    ThumbCell.align        = 'right';
    ThumbTable.cellPadding = '5';
    CaptionTable.align     = 'center';
    CaptionTable.width     = '99%';
    DownNavTable.align     = 'center';
    DownNavTable.width     = '99%';
    MainCaption.style.marginTop = '4px';

    // Save all of these elements for later if needed.
    this.mainRow     = Row;
    this.mainCell    = MainCell;
    this.thumbCell   = ThumbCell;
    this.mainImage   = MainImage;
    this.mainCaption = MainCaption;
    this.thumbTable  = ThumbTable;

}

//======================================================================
// registerCallBacks()
//
// This registers listening functions to handle actions within the page,
// such as clicking on a thumb.
//======================================================================
PhotoGallery.prototype.registerCallbacks = function()
{
    var ThumbImages = this.getThumbImage();
    for ( var i = 0; i < ThumbImages.length; i++ ) {
        ThumbImages[i].onclick = GalleryCallBack;
    }
}

//======================================================================
// displayGallery()
//
// Re-draws the images into the correct elements based on the value of
// the objects pointer.
//======================================================================
PhotoGallery.prototype.displayGallery = function()
{
    if ( ! this.init ) {
        this.drawLayout();
        this.init = true;
    }

    for ( var i = 0; i < this.getThumbCount(); i++ ) {
        var newIndex = this.getPointer()+i;
        var Photo    = this.getPhotos(newIndex);
        if ( i == 0 ) {
            this.setMainPhoto(Photo);
            this.setThumb(i,Photo);
        } else {
            this.setThumb(i,Photo);
        }
    }
}

//======================================================================
// setMainPhoto(Photo)
//
// Given a photo, set the main photo to it.
//======================================================================
PhotoGallery.prototype.setMainPhoto = function(Photo)
{
    this.mainImage.src         = Photo['photo'];
    this.mainCaption.innerHTML = Photo['caption'];
}

//======================================================================
// setThumb(index,Photo)
//
// Given a photo and a thumb index, set that thumb to that photo.
//======================================================================
PhotoGallery.prototype.setThumb = function(index,Photo)
{
    var thumbImage = this.getThumbImage(index);
    thumbImage.src = Photo['thumb'];
}

//======================================================================
// getThumbImage(index)
//
// Return the image object in the document for a given thumb or returns
// all of the thumb images.
//======================================================================
PhotoGallery.prototype.getThumbImage = function(index)
{
    if ( typeof(index) != 'undefined' ) {
        return this.thumbTable.rows[index].getElementsByTagName('img')[0];
    } else {
        var Thumbs = Array();
        var Rows   = this.thumbTable.rows;
        for ( var i = 0; i < Rows.length; i++ ) {
            Thumbs[Thumbs.length] = Rows[i].getElementsByTagName('img')[0];
        }
        return Thumbs;
    }
}

//======================================================================
// function GalleryCallBack(e)
//
// This is a callback function that handles the clicking and then
// cycling of images.
//======================================================================
function GalleryCallBack(e)
{
    var ThumbImage;

    // Figure out the event that occured.
    if ( typeof(e) == 'undefined' ) e = window.event;
    if ( e.target ) {
                ThumbImage = e.target;
    } else if ( e.srcElement ) {
                ThumbImage = e.srcElement;
        }

        // Fix Safari bug.
    if ( ThumbImage.nodeType == 4 ) {
                ThumbImage = ThumbImage.parentNode;
        }

        var ThumbIndex = ThumbImage.id.split('_')[1];
        var newIndex   = PhotoGallery.getPointer() + parseInt(ThumbIndex);
        var newPhoto   = PhotoGallery.getPhotos(newIndex);
        PhotoGallery.setMainPhoto(newPhoto);
}

//======================================================================
// cycleUp()
//
// Has the effect of showing "previous".
//======================================================================
function cycleUp()
{
    var lastIndex = PhotoGallery.getPointer() - 1;
    if ( lastIndex < 0 ) lastIndex = PhotoGallery.photos.length - 1;
    PhotoGallery.setPointer(lastIndex);
    PhotoGallery.displayGallery();
}

//======================================================================
// cycleDown()
//
// Has the effect of showing "next".
//======================================================================
function cycleDown()
{
    var nextIndex = PhotoGallery.getPointer() + 1;
    PhotoGallery.setPointer(nextIndex);
    PhotoGallery.displayGallery();
}