// <![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.
//
//  Version: 1.1 (with pagination)
//
//  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, _page=8): set up the variables, populate the list, assign event observers
    //      _elementid : the ID of the dom element that contains the gallery
    //      _image_list : JSON array of images
    //      _page : thumbnail page cutoff
    initialize: function(_elementid, _image_list, _page) {
        
        // set up the variables
        this.element = $(_elementid);
        this.elementid = _elementid;
        
        // if no value was provided for _page, default to 8
        if (!_page) _page = 8;
        
        // if the number of images is greater than the thubnail page cutoff, calculate the number of pages required
        if (_image_list.size() > _page) this.pages = parseInt(_image_list.size() / _page) + ((_image_list.size() % _page) ? 1 : 0);
        else this.pages = 1;
        
        // set the current page
        this.page = 1;
        
        // populate this.image_list
        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];
            
        }
        
        // create a div for each thumbnail page
        for (var i=0;i < this.pages;i++) {
            $(this.elementid + 'thumbs').insert('<div id="' + this.elementid + 'thumbs' + (i + 1) + '" class="thumbpage"' + ( i ? ' style="display: none;"' : '' ) + '></div>');
        }
        
        // load the first image first by inserting it into the image container...
        // (load lineup: 1st image, thumbnails, other images)
        $(this.elementid + 'images').insert('<div class="image" id="image' + 1 + '"><a href="' + this.image_list[0].link + '" rel="lightbox[mygallery]" title="' + this.image_list[i].caption + '"><img src="' + this.image_list[0].addr + '" alt="' + this.image_list[0].alt + '" /></a><br /><span class="imagecaption">' + this.image_list[0].caption + '</span><br /><span class="imageenlarge">(click to enlarge)</span></div>');
        
        // ...then load all the thumbnails...
        for (var i=0;i < _image_list.size();i++) {
            
            // calculate the page
            var page = ( (i+1)%_page ) ? (parseInt((i+1) / _page) + 1) : parseInt((i+1) / _page);
            
            // insert a thumbnail div into the thumbs div
            $(this.elementid + 'thumbs' + page).insert('<a href="javascript:' + this.elementid + '.showimage(' + (i + 1) + ');"><img src="' + this.image_list[i].tnaddr + '" alt="' + this.image_list[i].alt + '"></a>');
            
            
        }
        
        // ...and then load the rest of the images
        for (var i=1;i < _image_list.size();i++) {
            
            // insert an image div into the image container
            $(this.elementid + 'images').insert('<div class="image" id="image' + (i+1) + '" style="display: none;"><a href="' + this.image_list[i].link + '" rel="lightbox[mygallery]" title="' + this.image_list[i].caption + '"><img src="' + this.image_list[i].addr + '" alt="' + this.image_list[i].alt + '" /></a><br /><span class="imagecaption">' + this.image_list[i].caption + '</span><br /><span class="imageenlarge">(click to enlarge)</span></div>');
            
            
        }
        
        // create the page links, if necessary
        if (this.pages > 1) {
            
            // create a container for the links
            $(this.elementid + 'thumbs').insert('<div id="' + this.elementid + 'thumbpages">page: </div>');
            
            // create the links
            for (var i=0;i < this.pages;i++) {
                $(this.elementid + 'thumbpages').insert('<span id="' + this.elementid + 'thumbpagelink' + (i+1) + '">' + (i ? '<a href="javascript:' + this.elementid + '.thumbpage(' + (i+1) + ')">' + (i+1) + '</a>' : '<strong>' + (i+1) + '</strong>') + '</span> ' + ( (i==(this.pages-1)) ? '' : ' | ' ));
            }
            
        }
        
        // set the first image number
        $(this.elementid + 'number').update(this.active_img + '/' + this.image_list.size());
        
    },
    
    // 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), {duration: 0.5});
            new Effect.Appear($('image' + _new_img), {duration: 0.5});
            
            // set the new active image
            this.active_img = _new_img;
            
            // set the image number and caption
            $(this.elementid + 'number').update(this.active_img + '/' + this.image_list.size());
        }
        
        // 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);
    },
    
    // thumbpage(_page): displays a thumbnail page and hides the rest
    thumbpage: function(_page) {
        // make sure the page isn't already visible
        if (!$(this.elementid + 'thumbs' + _page).visible()) {
            // transition
            new Effect.Fade($(this.elementid + 'thumbs' + this.page), {duration: 0.5});
            new Effect.Appear($(this.elementid + 'thumbs' + _page), {duration: 0.5});
            // swap link styles
            $(this.elementid + 'thumbpagelink' + this.page).update('<a href="javascript:' + this.elementid + '.thumbpage(' + this.page + ')">' + this.page + '</a>');
            $(this.elementid + 'thumbpagelink' + _page).update('<strong>' + _page + '</strong>');
            // set the global variable
            this.page = _page;
        }
    },
    
    // 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();
    }
    
});


// ]]>