jQuery Plugin to change various content (images, text, css) on various element from a menu

content_switcher.js

/*
 * jQuery Plugin to change various content (images, text, css) on various 
 * element from a menu
 * 
 * by default the loading spinner usage needs to hide the menu and display the spinner, 
 * this is at your responsability in your CSS, also it's yours to provide the 
 * spinner (as an image, background CSS, etc.. as you like)
 * 
 * Usage sample :
 * 

    <div id="colors-choices">
        <p class="loading">Loading</p>
        <ul class="menu">
            <li><a href="#" data-color-choiceid="blue" class="active">
                <p>Blue choice</p>
            </a></li>
            <li><a href="#" data-color-choiceid="orange">
                <p>Orange choice</p>
            </a></li>
            <li><a href="#" data-color-choiceid="red">
                <p>Red choice</p>
            </a></li>
        </ul>
    </div>
    <div>
        <p><img src="/images/choices/blue.png" id="switchable-1" alt=""></p>
    </div>

    <script type="text/javascript">
        $("#colors-choices").ContentSwitcher({
            "default_entry" : 'blue',
            "entries" : {
                'blue': {
                    '#switchable-1': ['image', '/images/choices/blue.png']
                },
                'orange': {
                    '#switchable-1': ['image', '/images/choices/orange.png']
                },
                'red': {
                    '#switchable-1': ['image', '/images/choices/red.png']
                }
            }
        });
    </script>

 */
(function ( $ ) {

/*
* Plugin extensions calling logic
*/
$.fn.ContentSwitcher = function(method) {
    // Specific public method called
    if ( extensions[method] ) {
        return extensions[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    // Default public method to init the plugin
    } else if ( typeof method === 'object' || ! method ) {
        return extensions.init.apply( this, arguments );
    // Unknow called method
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.ContentSwitcher' );
    }
};

/*
 * Simple image preloader method
 */
var image_preloader = function(image) {
    var img = new Image();
    img.src = image;
}

/*
* Plugin extension methods
*/
var extensions = {
    /*
    * Initialize plugin, default public method, must be called first
    */
    init : function(options) {
        var settings = $.extend( {
            "default_entry" : '',
            //"prepend_static_url" : '', // not used, deprecated, don't mind
            "entries" : {} // Indexed on entry keyword
        }, options);
        
        return this.each(function() {
            var $this = $(this),
                extra_context = {};
            
            // Attach settings to the element
            $this.data("ContentSwitcher", {
                "settings": settings
            });
            
            // Do the job
            $this.ContentSwitcher('preload');
            $this.ContentSwitcher('bind_switching');
        });
    },
 
    /*
    * Preload all finded images in entries content
    */
    preload : function() {
        return this.each(function(){
            //console.info("Initial method");
            
            var $this = $(this),
                data = $this.data("ContentSwitcher");
            
            //console.group("Preloading items");
            $.each( data.settings.entries, function( color_name, color_contents ) {
                if(color_name!=data.settings.default_entry){
                    $.each( color_contents, function( key, value ) {
                        //console.log([key, value]);
                        if(value[0]=='image'){
                            image_preloader(value[1]);
                        }
                        // TODO: for css kind, parse background-image:url(..) to preload item
                    });
                }
            });
            //console.groupEnd();
        });
    },
    
    /*
    * Bind content switching for click event on menu entries
    */
    bind_switching : function() {
        return this.each(function(){
            //console.info("Bind method");
            
            var $this = $(this),
                data = $this.data("ContentSwitcher");
            
            $('.menu li a', $this).click(function(e){
                var $elem = $(this);
                if(!$elem.hasClass('active')){
                    // Active class switch
                    $('.menu li a', $this).removeClass('active');
                    $elem.addClass('active');
                    // Content to switch
                    $.each( data.settings.entries[$elem.attr('data-color-choiceid')], function( key, value ) {
                        var kind = value[0],
                            content = value[1];
                        if(kind=='image'){
                            $(key).attr('src', content);
                        } else if(kind=='css'){
                            $(key).css(content);
                        } else {
                            $(key).html(content);
                        }
                    });
                }
                return false;
            });
            
            $('.loading', $this).hide();
            $('.menu', $this).show();
        });
    }
};

}( jQuery ));