/**
* jquery.media_gallery 1.0.1 - Using existing thumbnails and media files (such
*                              as YouTube thumbnails and videos) create a
*                              clickable gallery.
* 
* Copyright (c) 2009 Blake Schwendiman
* http://www.thewhyandthehow.com
*
* Licensed under MIT license
* http://www.opensource.org/licenses/mit-license.php
*
* Launch  : April 2009
* Version : 1.0.0 - Apr 01 2009
* Version : 1.0.1 - Apr 14 2009
*
*/

/** Usage:
* 
* $(selector).media_gallery(options)
*
* media_gallery uses a simple HTML structure with an image and
* a media file to create a clickable gallery that selects a media file
* based on an image (likely a thumbnail)
*
* the structure of the HTML should be similar to:
* <div id="media_gallery"></div> <!-- you must have a target container for the media somewhere on your page -->
* 
* <div class="media_gallery"> <!-- outer container, selector for plugin -->
*   <img src="http://img.youtube.com/vi/i5LcBdbH8bo/2.jpg"> <!-- thumbnail should be at this level -->
*   <div> <!-- media container, optional parameter to media_gallery -->
*     <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1"></param>
*       <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
*       <embed src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
*     </object>
*   </div>
* </div>
*
* Options:
*   target_container:  the element representing the target container
*                      default: '#media_gallery'
*                      
*   media_container:   the element type of the media container
*                      default: 'div'
*                      
*   auto_select_first: should media_gallery automatically display the first
*                      media item?
*                      default: true
*
*   thumbnail_element: the element selector for the thumbnails
*                      default: 'img'
*
* Examples:
*   $('.media_gallery').media_gallery(); // default usage
*
*/

; (function($) {
    //
    // plugin definition
    //
    $.fn.media_gallery = function(options) {
        // build main options before element iteration
        var opts = $.extend({}, $.fn.media_gallery.defaults, options);
        var cur_item = 0;

        return this.each(function() {
            $this = $(this);
            // build element specific options
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            $(o.media_container, $this).hide();
            $(o.thumbnail_element, $this).bind('click', function() {
                $(o.target_container).html($(o.media_container, $(this).parent()).html());
            }).css({ 'cursor': 'pointer' });

            // select first media item if applicable      
            if (o.auto_select_first && cur_item == 0) {
                $(o.target_container).html($(o.media_container, $this).html());
            }
            cur_item++;
        });
    };

    // plugin defaults
    $.fn.media_gallery.defaults = {
        target_container: '#media_gallery',
        media_container: 'div',
        auto_select_first: true,
        thumbnail_element: 'img'
    };
})(jQuery);