flexible jquery plugin setup

by lollero

HTML

<button>Click</button> <div>1</div>

<button>Click</button> <div>2</div>

CSS

div {
    background: #e1e1e1;
    margin: 5px;
}

JavaScript

$(function() {

    $('div').test();

});

(function($) {

    $.fn.extend({ test: function( options ) {
      
      var defaults = {
          effect: 'fade',
          color: 'red',
          size: [20, 60]
      };
        
      return this.each(function() {

        var obj = $(this),
            o = $.extend( true, {}, defaults, options ),
            button = obj.prev(),
            x = {};
        
        x.o = o,
        x.obj = obj,
        x.button = button;
          
        typeof modify == 'function' && modify( x );

        console.log( x.lol );
          
        typeof clickEvent == 'function' && clickEvent( x );


      });  
        
    }});
    
    
    function modify( x ) {
        
        $('<div>lol</div>').insertAfter( x.obj );
            
        x.obj.css({ 
            color: x.o.color,
            width: x.o.size[0],
            height: x.o.size[1]
        });
        
        x.lol = 'hehe',
        x.objN = x.obj.next();
            
    }
    
    function clickEvent( x ) {
    
        var active = 0;
        
        x.button.on("click", function() {
            
            active = !active ? 1 : 0,
            toggleWidth = active ? 200 : x.o.size[0];
            
            x.obj.width( toggleWidth );
            
        });
        
        
        effects[ x.o.effect ]( x );
    
    }

    var effects = {
        slide: function ( x ) { 

            console.log('slide'); 

        },
        fade: function ( x ) { 

            console.log('fade');
            
            console.log( x.objN.length );

        }
    };

})(jQuery);