// <![CDATA[
//****************************************************************************************************
//
//  Common Content : Gallery Display Class
//      Written by Michael Stenta.
//      { http://www.mstenta.net }
//      
//
//  Filename:
//      /common/js/gallery.js
//
//  Description:
//      Defines the gallery class for creating nice gallery displays.
//
//  License:
//      This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 
//      United States License. To view a copy of this license, visit 
//      http://creativecommons.org/licenses/by-nc-sa/3.0/us/ or send a letter to 
//      Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
//
//####################################################################################################

// Gallery class constructor
var Gallery = Class.create({
    
    // the list element DOM selector
    element: '',
    
    // the list element id
    elementid: '',
    
    // the list of image addresses
    image_list: [],
    
    // the presently visible image (default 1)
    active_img: 1,
    
    // initialize(_elementid, _image_list): set up the variables, populate the list, assign event observers
    initialize: function(_elementid, _image_list) {
        
        // set up the variables
        this.element = $(_elementid);
        this.elementid = _elementid;
        
        // create the thumbnails div
        //this.element.insert('<div class="thumbdiv" id="' + this.elementid + 'thumbs" style="display: none;"></div>');
        
        for (var i=0;i < _image_list.size();i++) {
            // add images from the list to the image_list array
            this.image_list[i] = _image_list[i];
            
            // insert an image div into the image container
            $(this.elementid + 'images').insert('<div class="image" id="image' + (i + 1) + '" ' + (i ? ' style="display: none;"' : '') + '><img src="' + this.image_list[i].addr + '" /></div>');
            
            // insert a thumbnail div into the thumbs div
            // enable this when the backend is finished and custom height/width="50" attributes are no longer necessary
            //$(this.elementid + 'thumbs').insert('<a href="javascript:swapImg(' + (i + 1) + ');"><img src="' + this.image_list[i] + '" width="50"></a>');
        }
        
        // set the first image number, caption, and credit
        $(this.elementid + 'number').update(this.active_img + '/' + this.image_list.size());
        $(this.elementid + 'caption').update(this.image_list[this.active_img - 1].caption);
        $(this.elementid + 'credit').update(this.image_list[this.active_img - 1].credit);
        
        // assign event observers
        // for each image div element within this gallery, add a
        //for (var i=0;i < $$('#' + this.elementid + 'div.image').size();i++) {
            
        //}
    },
    
    // showimage(_new_img): hide the active_img and show the new_img
    showimage: function(_new_img) {
        if (this.active_img != _new_img) {
            // fade out with the old, in with the new
            new Effect.Fade($('image' + this.active_img));
            new Effect.Appear($('image' + _new_img));
            
            // set the new active image
            this.active_img = _new_img;
            
            // set the image number, caption, and credit
            $(this.elementid + 'number').update(this.active_img + '/' + this.image_list.size());
            $(this.elementid + 'caption').update(this.image_list[this.active_img - 1].caption);
            $(this.elementid + 'credit').update(this.image_list[this.active_img - 1].credit);
        }
        
        // hide the thumbnails
        this.hidethumbs();
    },
    
    // nextimage(): display the next image in the list from the currently active image
    nextimage: function() {
        // if it's the last image, wrap to the first, otherwise go to the next
        if (this.active_img == this.image_list.size()) this.showimage(1);
        else this.showimage(this.active_img + 1);
    },
    
    // previmage(): display the previous image in the list from the currently active image
    previmage: function() {
        // if it's the first image, wrap to the last, otherwise go to the previous
        if (this.active_img == '1') this.showimage(this.image_list.size());
        else this.showimage(this.active_img - 1);
    },
    
    // showthumbs(): display the thumbnails
    showthumbs: function() {
        new Effect.Appear($(this.elementid + 'thumbs'), {duration: 0.5});
    },
    
    // hidethumbs(): hide the thumbnails
    hidethumbs: function() {
        new Effect.Fade($(this.elementid + 'thumbs'), {duration: 0.5});
    },
    
    // togglethumbs(): show/hide the thumbnails
    togglethumbs: function() {
        if ($(this.elementid + 'thumbs').visible()) this.hidethumbs();
        else this.showthumbs();
    }
    
});


// ]]>