JQuery Custom Events

by iDVB

HTML

<div id="color_blocks">
      <div class="color_block"></div>
      <div class="color_block"></div>
      <div class="color_block"></div>
      <div class="color_block"></div>
      <div class="color_block"></div>
      <div class="color_block"></div>
      <div class="color_block"></div>
      <div class="color_block"></div>
</div>

<div id="observer-one" class="observer"> </div>
<div id="observer-two" class="observer"> </div>

CSS

.color_block {
    width: 50px;
    height: 50px;
    cursor: pointer;
    float: left;
    margin: 0 5px 5px 0;
}

.observer {
    clear: left;
    margin: 10px 0;
    padding: 10px;
    float: left;
    background: #eee;
    font-family: Helvetica, Arial;
}

#observer-one { border-top: solid 2px red; }
#observer-two { border-top: solid 2px blue; }

JavaScript

(function($){
    $.ColorObserver = function(el, options){
        var base = this;
        
        base.$el = $(el);
        base.el = el;
        
        base.$el.data("ColorObserver", base);
        
        base.init = function(){
            base.options = $.extend({},$.ColorObserver.defaultOptions, options);
            $(base.options.colorObjs).live('color_changed', function(){ base.discoverColors(); });
            base.discoverColors();
        };
        
        base.discoverColors = function(){
            var colors_count = {};
            $(base.options.colorObjs).each(function(){
                var color = $(this).data('ColorBlock').getColor();

                if(!colors_count[color])
                    colors_count[color] = 1;
                else
                    colors_count[color] += 1;
            });

            var output = "";
            $.each(colors_count, function(key,value){
                output += key + "=" + value + "<br />";
            })
            base.$el.html(output);
        };
        
        base.init();
    };
    
    $.ColorObserver.defaultOptions = {
        colorObjs: "div.color_block"
    };
    
    $.fn.colorObserver = function(options){
        return this.each(function(){
            (new $.ColorObserver(this, options));
        });
    };
    
    $.fn.getColorObserver = function(){
        this.data("ColorObserver");
    };
    
})(jQuery);

(function($){
    $.ColorBlock = function(el, options){
        var base = this;
        
        base.$el = $(el);
        base.el = el;
        
        base.$el.data("ColorBlock", base);
        
        base.init = function(){
            base.options = $.extend({},$.ColorBlock.defaultOptions, options);
            
            base.$el.click(function(){ base.nextColor(); });
            base.setColor(0);
        };
        
        base.setColor = function(new_color_index){
            if( new_color_index != base.current_color_index ){
               ...