/**
 *  The ImageSelect class takes a configuration that is intended to
 *  provide a starting point where more functionality can be added
 *  to the concept of swapping out photos based on
 */
function ImageSelect( config )
{
    var self = this;

    config.clear_status_text = config.clear_status_text || '';
    config.status_text  = config.status_text || 'Click To Enlarge';
    config.gallery_template = config.gallery_template ||
        '<a rel="lightbox[#{gallery}]" href="#{href}">' +
        '<img src="#{src}" title="#{title}" alt="#{alt}" /></a>';

    //  Suffixing the required elements with a number to allow for the
    //  possibility the user of this class failed to offer up a
    //  gallery name, and the possibility of conflicting gallery names
    //  is circumvented.
    config.suffix = config.gallery_suffix ||
        String( Math.floor( Math.random() * 10000 ));

    config.gallery_name = config.gallery_name ||
        ('gallery-' + config.suffix );

    config.gallery_substitute =
        {
            gallery: config.gallery_name,
            href: '',
            src: '',
            title: '',
            alt: ''
        };
        
     config.thumb_max_width  = config.thumb_max_width || 100;
     config.thumb_max_height = config.thumb_max_height || 100;
     config.view_max_width   = config.view_max_width || 300;
     config.view_max_height  = config.view_max_height || 300;

    /**
     *  An object of the class ImageSelect must be initialized so that
     *  it can find the areas of the HTML that is required to update.
     *  The following are required in the configuration:
     *      full_view_id, and thumb_area_id
     *  Currently photo_caption_id is optional, and is not used.
     */
    this.initialize = function()
    {
        config.full_view_element =
            document.getElementById( config.full_view_id );
        config.large_image =
			config.full_view_element .getElementsByTagName('img')[0];

        self.setDimensions( config.large_image.width,
            config.large_image.height, config.view_max_width, 
            config.view_max_height, config.large_image );

        config.large_anchors = config.full_view_element
            .getElementsByTagName('a');
        config.large_anchor = config.large_anchors[0];
        config.thumb_area_element =
            document.getElementById( config.thumb_area_id );
        config.thumb_images =
            config.thumb_area_element.getElementsByTagName( 'img' );
        config.photo_caption_element =
            document.getElementById( config.photo_caption );

        for (var i = 0; i < config.thumb_images.length; i++)
        {
            var image = config.thumb_images[i];
            var anchor = config.large_anchors[i+1];
            
            anchor.title = image.title;

            self.saveDimensions( image );

            self.setDimensions( image.width, image.height,
                config.thumb_max_width, config.thumb_max_height,
                image );

            image.style.cursor = config.cursor;

            YAHOO.util.Event.addListener( image, 'mouseover',
                self.mouseover);

            YAHOO.util.Event.addListener( image, 'mouseout',
                self.mouseout);

            YAHOO.util.Event.addListener( image, 'click',
                self.thumb_click);
        }
    };
    /**
     *  This saves the original/current image width and height to 
     *  the image object that it is given.
     */
    this.saveDimensions = function( image )
    {
        image.w = image.width, image.h = image.height;
    }
    /**
     *  This function takes as a parameter an element from the
     *  configuration and then adjusts either the width or the
     *  height to be equal to the configuration setting max_dimension.
     */
    this.setDimensions = function( w, h, max_width, max_height, image )
    {
        var ratio = 1.0;
        var max_w = max_width / 1.0; // turns it into a float
        var max_h = max_height / 1.0; // turns it into a float

        if (w > max_w && h > max_h) // case 1: both w & h too large
        {
            ratio = ((w / max_w) > (h / max_h)) ?
                (max_w / w) :
                (max_h / h);
        }
        else if (w > max_w && h <= max_h) // case 2: w too large h ok
        {
            ratio = max_w / w;
        }
        else if (w <= max_w && h > max_h) // case 3: h too large w ok
        {
            ratio = max_h / h;
        }
        // else case 4: w & h are both ok. ratio = 1.0 does nothing below.

        image.width = (w * ratio);
        image.height = (h * ratio);
    };
    /**
     *  This function is reliant on the YUI implementation of the
     *  addListener which provides that the 'this' reference points
     *  to the element for which this function listens.  Currently
     *  this function only swaps out the image of the larger view.
     *  for the image of the thumb nail.  Presumably the thumbnail
     *  image has been modified via CSS to fill a smaller width and
     *  height.
     */
    this.thumb_click = function()
    {
        var temp_src = config.thumbToMediumImage( this.src );
        var temp_href = config.thumbToLargeImage( this.src );
        var temp_title = this.title || 'No Title';

        config.large_anchor.href = temp_href;
        config.large_anchor.title = temp_title;
        config.large_image.src = temp_src;

        self.setDimensions( 
            this.w, 
            this.h,
            config.view_max_width,
            config.view_max_height,
            config.large_image );

        config.photo_caption_element.innerHTML = this.title;
    }
    /**
     *  This function updates the status bar and the alt attribute
     *  of the element.  In IE this will cause a rollover tool-tip
     *  with the phrase provided in the status_text configuration
     *  property.  This is not the prefered way to handle tool-tips
     *  however until a tool-tip library addition is found that is
     *  cross browser this will do, until such time.
     */
    this.mouseover = function()
    {
        // status in IE, statusbar in FF
        window.status = config.status_text;
        window.statusbar = config.status_text;
    };
    /**
     *  The mouse out clears the status line and puts the alt tag
     *  back to it's original text.
     */
    this.mouseout = function()
    {
        // status in IE, statusbar in FF
        window.status = config.clear_status_text;
        window.statusbar = config.clear_status_text;
    };
};
/**
 *  Upon load of the entire page the ImageSelect object is
 *  created and initialized.
 */
YAHOO.util.Event.addListener(window, 'load',
    function()
    {
        new ImageSelect(
            {
            full_view_id        : 'fullView',
            thumb_area_id       : 'galThumbs',
            cursor              : 'pointer',
            gallery_name        : 'g1',
            photo_caption       : 'photoCaption',
            
            /**
             *  Control the dimensions of the images in specific areas.
             *
             *  Defaults:
             *      thumb_max_width     : 100,
             *      thumb_max_height    : 100,
             *      view_max_width      : 300,
             *      view_max_height     : 300,
             */
             thumb_max_width     : 75,
             thumb_max_height    : 75,
             view_max_width      : 290,
             view_max_height     : 290,

            /**
             *  This simply swaps out the thumb name for the
             *  unmodified larger image.
             */
            thumbToLargeImage   : function( file_name )
            {
                return file_name.replace(/_th/, '_lrg');
            },

            /**
             *  This simply swaps out the thumb name for the
             *  unmodified larger image.
             */
            thumbToMediumImage   : function( file_name )
            {
                return file_name.replace(/_th/, '');
            }

            }).initialize();
    });