Spinning Cat of Doom! (RaphaelJS)

by serio

HTML

<script src=" //cdnjs.cloudflare.com/ajax/libs/raphael/1.5.2/raphael-min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div id="holder">
</div>
<input id="spin" type="button" value="spin" />

CSS

body
{
    width: 100%;
    margin: 0; padding: 0;
    font: 90% Helvetica, Arial, sans-serif;
}

#holder
{
    margin: 0 auto;
    width: 513px;
    height: 513px;
    padding: 20px;
}

#spin
{
    margin: 0 auto;
    padding: 10px;
    width: 100px;
    display: block;
    
    border: none;
    background: #666;
    color: #FFF;
    font-size: 20px;
    text-transform: uppercase;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#links
{
    width: 160px;
    margin: 0 auto;
    text-align: center;
    padding: 10px;
    margin-top: 40px;
}

#links a
{
    color: #666;
    padding: 3px 6px;
    display: block;
}

JavaScript

var img;
var button;

$(function() {
    var src = 'http://media.tumblr.com/tumblr_lhx9z21lLf1qzozj1.gif',
        angle = 0;
    document.getElementById("holder").innerHTML = "";
    var R = Raphael("holder", 513, 513);
    img = R.image(src, 0, 0, 513, 513);
    button = $('#spin, #holder');

    button.click(rotate);
});

function rotate() {
    button.unbind('click');
    button.eq('1').css('background', '#e1e1e1');

    var min = 1000;
    var max = 3600;
    var n = max - min + 1;

    img.rotate(0, true);
    img.animate({
        rotation: Math.round(Math.random() * n + min)
    }, 5000, ">", function() {
        button.click(rotate);
        button.removeAttr('disabled');
        button.eq('1').css('background', '#666');
    });
}