// Pixelsilk Simple Photo Gallery Plugin
// Version 1.0.2 - DMC
// Last Update: 1/20/2010 - DMC
// This plugin takes a Photo Gallery List Section and creates a 'filmstrip' style viewer on the page.

/*
    ## Example HTML: ##
    -----------------------------
    <!-- The Large Image Container -->
    <div id="photoLargeImage">
        <img id="largeImage" />
    </div>
    <!-- The Image Thumbnails -->
    <div id="photoItems">
        <div class="item">
            <a class="item" href="image-large.jpg"><img src="image-small.jpg" /></a>
            <p class="desc">This is the image's description</p>
        </div>
        <div class="item">
            <a class="item" href="image-large2.jpg"><img src="image-small2.jpg" /></a>
            <p class="desc">This is the second image's description</p>
        </div>
    </div>
    
    ## Example CSS: ##
    -----------------------------
    #photoLargeImage {position:relative; width:515px; height:385px; text-align:center; overflow:hidden;}
    #photoLargeImage img {margin: 0 auto; position:absolute; top:0; left:0; z-index:20; width:515px; height:385px;}
    #photoLargeImage p#imageDescription {position:absolute; bottom:0; left:0; z-index:40; width:100%; margin:0; padding:0;}
    #photoLargeImage p#imageDescription span {display:block; padding:5px;}
    #photoItems {margin:5px 0; width:520px;}
    .photoItem {float:left; margin:0 5px 15px 0; width: 125px; cursor:pointer; position:relative;}
    .photoItem p.desc {display:none;}
    #photoItems img {position:relative; z-index:10;}
    #photoItems a img:hover {opacity:0.85;}
    .loading {background-image:url('/loadingIcon.gif'); background-repeat:no-repeat; background-position: center 45%;}

*/

jQuery.fn.pixelsilkPhotoGallery = function(options) {
    
    // Define the defaults (user changeable) for the plugin:
    var defaults = {
        largeImageContainerSelector:    '#photoLargeImage',            // The Large Image Container Selector
        largeImageSelector:                '#largeImage',                // Selector for the Large Image
        thumbnailItemSelector:            '.item',                    // Thumbnail Container Selector
        largeImageFadeInSpeed:            'slow',                        // Fade In speed of the large image
        largeImageWidth:                '400',                        // Large Image Width (currently NOT in use; in development)
        largeImageHeight:                '300',                        // Large Image Height (currently NOT in use; in development)
        largeImageLoadingClass:            'loading',                    // Large Image Container Class while loading
        loadFirstImage:                    true,                        // Load the first image in thumbnails into the large image container. Options: true|false
        showLargeImageDescription:        true,                        // Show the image description. Options: true|false
        largeImageDescriptionID:        'imageDescription',            // Image Description (brief description) ID
        thumbnailDescriptionSelector:    'p.desc',                    // Thumbnail Description Selector
        descriptionOpacity:                '75',                        // Opacity amount of the description container
        descriptionForegroundColor:        '#000000',                    // Text color of the description container
        descriptionBackgroundColor:        '#ffffff'                    // Background color of the description container
    }
    var options =  $.extend(defaults, options);
    
    // Prepare the page for the Plugin:
        
        // Adds the Image Description for the Large Image:
        if (options.showLargeImageDescription) {
            $('img#' + options.largeImageSelector).after('<p id="' + options.largeImageDescriptionID + '"></p>');
        }
    
    
    // Show the large image:
    function showImage(src,desc) {
        $(options.largeImageContainerSelector + ' img').remove();
        var largeImage = new Image();
        $(largeImage).load(function() {
            $(this).hide();
            $(options.largeImageContainerSelector).append(this).removeClass(options.largeImageLoadingClass);
            $(this).fadeIn(options.largeImageFadeInSpeed);
            
            // If we are to show the image description:
            if (options.showLargeImageDescription) {
                if (desc != '') {
                    $('#' + options.largeImageDescriptionID).fadeIn();
                    $('#' + options.largeImageDescriptionID).html('<span>' + desc + '</span>');
                }
            }
            
        });
        $(largeImage).attr('src', src);
    }
    
    // If loadFirstImage is true:
    if (options.loadFirstImage) {
        var firstImageSrc = $(options.thumbnailItemSelector + ' a.item:first').attr('href');
        var imgDesc = $(options.thumbnailItemSelector + ' a.item:first').parent().find(options.thumbnailDescriptionSelector).html();
        showImage(firstImageSrc,imgDesc)
        
        // Define the CSS for the Image Description container:
        var overlayCss = {
            'opacity'        : '0.' + options.descriptionOpacity,
            'filter'        : 'alpha(opacity=' + options.descriptionOpacity + ')',
            'color'        : options.descriptionForegroundColor,
            'background'    : options.descriptionBackgroundColor
        }
        $('#' + options.largeImageDescriptionID).css(overlayCss);
    }
    
    // Load the large image into the large image container:
    $(this).find('a.item').click(function() {
        $('#' + options.largeImageDescriptionID).hide();
        var imageSource = $(this).attr('href');
        var imageDesc = '';
        $(options.largeImageContainerSelector).addClass(options.largeImageLoadingClass);
        imgDesc = $(this).parent().find(options.thumbnailDescriptionSelector).html();
        showImage(imageSource,imgDesc);
        return false;
    });
    
};