/**
 * jQuery plugin to swap showing and hiding of 2 elements, e.g. a 'Read More'/'Read Less' setup
 * @author Chris Forrette <chris@cubancouncil.com>
 * @param options Object Optional options object passed in to override defaults
 *
 * EXAMPLE:
 *
 * Javascript:
 *
 * $(document).ready(function() {
 *      $('#desc').swapview();
 * });
 *
 * Example HTML:
 *
 * <div id="desc">
 *      <div class="see-less">
 *			<p>Some description of...</p>                                
 *			<a href="#" class="see-more-toggle">READ MORE</a>
 *		</div>
 *		<div class="see-more">
 *			<p>Some description of something that is long enough to be truncated and such.</p>
 *			<a href="#" class="see-more-toggle">READ LESS</a>
 *		</div>
 * </div>
 */
jQuery.fn.swappable = function(options) {
    
    var options = jQuery.extend({
        'toggleSelector': '.see-more-toggle',
        'lessSelector': '.see-less',
        'moreSelector': '.see-more',
        'init': function() {
            this.collapsedItem.data('original_height', this.collapsedItem.height());
            this.expandedItem.data('original_height', this.expandedItem.height());
            this.expandedItem.css({
                'display': 'block',
                'opacity': 0
            });
            this.wrapperItem.css('height', this.collapsedItem.data('original_height'));
        },
        'expand': function() {
            var that = this;
            this.collapsedItem.animate({'opacity': 0}, 250, null, function() {
                that.collapsedItem.css('display', 'none');
                that.wrapperItem.animate({'height': that.expandedItem.data('original_height')}, 250, null, function() {
                    that.expandedItem.css('display', 'block');
                    that.expandedItem.animate({'opacity': 1}, 250);
                });
            });
        },
        'collapse': function() {
            var that = this;
            this.expandedItem.animate({'opacity': 0}, 250, null, function() {
                that.expandedItem.css('display', 'none');
                that.wrapperItem.animate({'height': that.collapsedItem.data('original_height')}, 250, null, function() {
                    that.collapsedItem.css('display', 'block');
                    that.collapsedItem.animate({'opacity': 1}, 250);
                });
            });
        }
    }, options);
    
    return this.each(function(i, item) {
        
        // Get collapsed/expanded items
        
        var collapsedItem = jQuery(item).find(options.lessSelector);
        var expandedItem = jQuery(item).find(options.moreSelector);
        
        if (collapsedItem.length && expandedItem.length) {
            
            // Arguments to pass to functions in options
            
            var args = jQuery.extend(options, {
                'wrapperItem': jQuery(item),
                'expandedItem': expandedItem,
                'collapsedItem': collapsedItem,
            });
        
            // Apply 'expand' event
        
            jQuery(item).find(options.lessSelector).find(options.toggleSelector).click(function(e) {
                e.preventDefault();
                options.expand.apply(args);
                jQuery(item).trigger('expand');
                jQuery(item).trigger('swap');
            });
        
            // Apply 'collapse' event
        
            jQuery(item).find(options.moreSelector).find(options.toggleSelector).click(function(e) {
                e.preventDefault();
                options.collapse.apply(args);
                jQuery(item).trigger('collapse');
                jQuery(item).trigger('swap');
            });
            
            // Apply init event
            
            options.init.apply(args);
        }
        
    });
    
};