The Wheel of Blame!

The Wheel of Blame goes round and round, round and round, round and round. Wheeeeeeeeeeeeee!!

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<p id="blame">The Wheel of Migration!</p>
<ul>
</ul>

<br class="clearfix" />

<button id="spin">Spin Again!</button>

CSS

body {
    font-family: Arial, sans-serif;Update
}

ul {
    float: left;
    margin-left: 20px;
    height: 160px;
    background-color: #efefef;
    padding: 10px 20px 10px 10px;
    
    overflow: hidden;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

ul li {
    font-size: 20px;
    margin-bottom: 30px;
    text-align: center;
}

ul li img {
    height: 60px;
    margin-right: 20px;
    vertical-align: bottom;
}

#blame {
    float: left;
    font-size: 12px;
    margin-top: 15px;
}

#spin {
    margin: -5px 0 0 15px;
    padding: 1px 3px 2px;
}

#sub {
    font-size: 11px;
    color: #ccc;
    clear: both;
    padding-top: 20px;
}

#sub a {
    color: #346C95;
}

#sub a:hover {
    color: #59B3EF;
}

#sub code {
    font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
}

JavaScript

var ul = $('ul'),
    spinBtn = $('#spin');

$.ajax({
    url: 'http://stackauth.com/1.0/sites',
    dataType: 'jsonp',
    cache: true,
    jsonp: 'jsonp',
    success: function(data) {
        var sites = data.api_sites;
        
        for (var i = 0; i < sites.length; i++) {
            if(sites[i].state !== 'linked_meta'){
                var li = $('<li>', {
//                    text: ' ' + sites[i].name
                }).appendTo(ul);
    
                $('<img>', {
                    alt: '',
                    src: sites[i].logo_url                }).prependTo(li);
            }
        }
        
        var li = ul.children();

        for (var i = 0; i < 3; i++) {
            li.clone().appendTo('ul');
        }

        function spin() {
            spinBtn.attr('disabled', true).text('Hang on!');

            li.first().animate({
                marginTop: -(li.first().outerHeight(true) * (Math.floor(Math.random() * li.length * 2) + li.length * 2)) - 2
            }, 5000, 'easeOutBounce', function() {
                spinBtn.attr('disabled', false).text('Spin Again!');
            });
        }

        spinBtn.click(function() {
            li.first().css('margin-top', 0);
            spin();
            return false;
        });

        spin();
    }
});