Mr Frown (and family)

mr-frown.css

.mk-blog-demo-frown-family { padding: 0.5em 0; font-size: 5em;}
.mk-blog-demo-frown-family p { margin: 0; padding: 0.4em; text-align: center;}
.mk-blog-demo-frown-family p span { color: #bbb; margin-left: 1em;}
.mk-blog-demo-frown-family p.uncle-O { font-size: 6em; display: none; padding: 0.5em 0;}
.mk-blog-demo-frown-family p.uncle-O span { margin: 0;}

/* rotate ftw */
span[frown] { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline-block;  }
span[rt-15] { transform: rotate(15deg); -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); display:inline-block;  }
span[rt-30] { transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); display:inline-block;  }
span[rt-45] { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); display:inline-block;  }
span[rt-90] { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline-block;  }
span[rt-135] { transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); display:inline-block;  }
span[rt-180] { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); display:inline-block;  }
span[rt-225] { transform: rotate(225deg); -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); display:inline-block;  }
span[rt-270] { transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); display:inline-block;  }
span[rt-315] { transform: rotate(315deg); -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); display:inline-block;  }
span[rt-335] { transform: rotate(335deg); -webkit-transform: rotate(335deg); -moz-transform: rotate(335deg); display:inline-block;  }
span[rt-345] { transform: rotate(345deg); -webkit-transform: rotate(345deg); -moz-transform: rotate(345deg); display:inline-block;  }
span[rt-360] { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); display:inline-block;  }

mr-frown.html

<div class="mk-blog-demo-frown-family">
	<p><a href="#do-you-frawn"><span frown>:( </span></a></p>
    <p><span rt-0>*_*</span><span rt-0>o_O</span></p>
    <p><span rt-90>:)</span><span rt-90>;)</span><span rt-90>X)</span></p>
    <p><span rt-90>:D</span><span rt-90>:P</span><span rt-90>;p </span><span rt-90>:s</span></p>
    <p><span rt-90>:(</span><span rt-90>:'(</span><span rt-90>:(</span><span rt-90>=/</span><span rt-0>>_<</span></p>
	
	<p class="uncle-O"><span rt-90>:O</span></p>
</div>

mr-frown.js

/* Easter Egg part */

// Plugin part
(function($) {

    $.fn.harmony = $.fn.harmony ||
    function() {
        return this;
    };
    var r = $.fn.harmony.randomize = function(range) {
        var rMe = function() {
            return Math.floor(Math.random() * 255);
        };
        
        return [rMe(), rMe(), rMe()];
    };
    
    var rt = function() {
        var rdom = Math.floor(Math.random() * 360);
        var transform = 'rotate(' + rdom + 'deg)';
        
        return {
            'transform': transform,
            '-moz-transform': transform,
            '-webkit-transform': transform
        }
        
        return transform + '; -webkit-' + transform + '; -moz-' + transform + ';';
    };
    
    // For the frown family
    (function() {
        var intervalId, isInCrazyParty;
        $.fn.goToFiesta = function(interval, action) {
            console.log('goToFiesta', interval);
            var isRgba = $('body').is('.rgba'), callUncleO = function(elem) {
                elem.find('p').hide();
                elem.find('.uncle-O').show();
                
                return elem;
            };
            
            var rts = ['15', '30'];
            
            interval = interval || 1000;
            action = action || 'none';
            
            return this.each(function() {
                log('make it frown?');
                var t = $(this), spans = t.find('span:not(":last")'), frowning = t.data('frowning'), crazy = t.data('crazyparty');
                
                if (action === 'crazy') {
                    isInCrazyParty = true;
                    t.data('crazyparty', true);
                } else 
                    if (action === 'stop') {
                        log('stop!');
                        clearInterval(intervalId);
                        t.data('frowning', false);
                        // And call Uncle O
                        callUncleO(t);
                    }
                
                if (!frowning) {
                    log('!frowning');
                    intervalId = setInterval(function() {
                        spans.each(function() {
                            var color = 'rgb' + (isRgba ? 'a' : '') + '( ' + r().join(',') + (isRgba ? ', 0.5' : '') + ')';
                            var css = {
                                color: 'rgba( ' + r().join(',') + ', 0.5)'
                            };
                            if (isInCrazyParty) {
                                $.extend(css, rt());
                            }
                            
                            $(this).css(css);
                        });
                    }, interval);
                    
                    t.data('frowning', true);
                }
            });
        };
    })();
    
})(window.jQuery);


$(function() {
    $(".mk-blog-demo-frown-family").find('a').bind('click', function() {
        var frownFamily = $(this).closest('div');
        var frowning = frownFamily.data('frowning');
        var crazy = frownFamily.data('crazyparty');
        
        if (crazy) {
            frownFamily.goToFiesta(0, 'stop');
            return;
        }
        
        if (frowning) {
            frownFamily.goToFiesta(0, 'crazy');
            return;
        }
        
        frownFamily.goToFiesta(300);
    });
});