sprite animator

gistfile1.js

var Sprite = {
    image: null,
    delay: 100,
    width: 0,
    height: 0,
    steps: 15,
    frame: 0,
    interval: null,
    initialize: function() {
        Sprite.interval != null && clearInterval(Sprite.interval);
        Sprite.width = $("#full_image > img").width() / Sprite.steps;
        Sprite.height = $("#full_image > img").height();
        $("#sprite").css({
            width: Sprite.width + "px",
            height: Sprite.height + "px",
            "background-image": "url(" + Sprite.image + ")"
        });
        Sprite.interval = setInterval("Sprite.update()", Sprite.delay)
    },
    update: function() {
        $("#sprite").css("background-position", -(Sprite.frame % Sprite.steps * Sprite.width) + "px 0px");
        Sprite.frame++
    }
};
$(function() {
    Sprite.image = "http://spritetester.s3.amazonaws.com/Feather06-A.png?delay=75";
    $("#full_image").html($("<img>", {
        src: Sprite.image
    }).load(function() {
        Sprite.initialize()
    }));
    $("#steps").change(function() {
        Sprite.steps = $(this).val();
        Sprite.initialize()
    });
    $("#delay").change(function() {
        Sprite.delay = $(this).val();
        Sprite.initialize()
    });
    $("#image").change(function() {
        Sprite.image = $(this).val();
        $("#full_image").html($("<img>", {
            src: Sprite.image
        }).load(function() {
            Sprite.initialize()
        }))
    })
});