$(document).ready(function()
{
    var dogWidth = 58;
    var dogHeight = 72;
    var yayIntervalId = 0;
    
    var randomRange = function(min, max)
    {
        return Math.round(min + (Math.random() * (max - min)));
    };
    
    var randomX = function()
    {
        return Math.round(Math.random() * ($(window).width() - dogWidth)) + 'px';
    };
    
    var randomY = function()
    {
        return Math.round(Math.random() * ($(window).height() - dogWidth)) + 'px';
    };
    
    var randomPosition = function()
    {
        var o;
        
        switch(Math.round(Math.random() * 3))
        {
            case 1:
                // right
                o = {
                    // 'background-color': '#f00',
                    'top': randomY(),
                    'right': '0px',
                    'bottom': 'auto',
                    'left': 'auto',
                    '-webkit-transform': 'rotate(-90deg)',
                    '-moz-transform': 'rotate(-90deg)',
                    '-ms-transform': 'rotate(-90deg)'
                };
                break;
                
            case 2:
                // top
                o = {
                    // 'background-color': '#0f0',
                    'top': '0px',
                    'right': 'auto',
                    'bottom': 'auto',
                    'left': randomX(),
                    '-webkit-transform': 'rotate(180deg)',
                    '-moz-transform': 'rotate(180deg)',
                    '-ms-transform': 'rotate(180deg)'
                };
                break;
                
            case 3:
                // left
                o = {
                    // 'background-color': '#00f',
                    'top': randomY(),
                    'right': 'auto',
                    'bottom': 'auto',
                    'left': '0px',
                    '-webkit-transform': 'rotate(90deg)',
                    '-moz-transform': 'rotate(90deg)',
                    '-ms-transform': 'rotate(90deg)'
                };
                break;
                
            case 0:
            default:
                // bottom
                o = {
                    // 'background-color': '#fc0',
                    'top': 'auto',
                    'right': 'auto',
                    'bottom': '0px',
                    'left': randomX(),
                    '-webkit-transform': 'rotate(0deg)',
                    '-moz-transform': 'rotate(0deg)',
                    '-ms-transform': 'rotate(0deg)'
                };
                break;
        }
        
        return o;
    };
    
    var animationEnd = function(e)
    {
        var t = $(this);
        var y = parseInt(t.css('background-position').split(' ')[1], 10);
        if (y > dogHeight - 20)
        {
            t.css('background-position', 'center ' + dogHeight + 'px');
            t.css(randomPosition());
            // Safari doesn't update the element's position sometimes.
            // Unless you know why, you don't need to tell me about it :)
        }
    };
    
    var newDog = function()
    {
        var dog = $('<div class="dog"></div>');
        var speed = randomRange(500, 1000) + 'ms';
        var o = randomPosition();
        o['-webkit-animation-duration'] = speed;
        o['-moz-animation-duration'] = speed;
        o['-ms-animation-duration'] = speed;
        dog.bind('webkitAnimationIteration MSAnimationIteration animationiteration', animationEnd);
        dog.css(o);
        $('body').append(dog);
    };
    
    var backToBusiness = function()
    {
        $('div.dog').removeClass('yay');
    };
    
    var yay = function()
    {
        clearInterval(yayIntervalId);
        $('div.dog').addClass('yay');
        yayIntervalId = setTimeout(backToBusiness, 350);
    };
    
    $(document).click(function()
    {
        yay();
        newDog();
    });
    
    newDog();
});