$(document).ready(function() {

  var animate = function(e) {
    var that = $(this);
    var data = that.data(e.type);

    //that.css("background-position", "0 "+ data[0]);
    that.data("py", data[0]);
    window.clearInterval(that.data("id"));

    //var trace = $("#trace").html();
    //trace += data[0] +"<br/>";
    //$("#trace").html(trace);

    that.data("id", window.setInterval(function() {
      var py = that.data("py");
      py += data[2];

      //var trace = $("#trace").html();
      //trace += py +' - '+ data[1] +"<br/>";
      //$("#trace").html(trace);

      if ((data[2] < 0 && py > data[1]) || (data[2] > 0 && py < data[1])) {
        that.css("background-position", "0 "+ py +"px");
        that.data("py", py);
      } else {
        window.clearInterval(that.data("id"));
        if (e.type === "mouseout") that.css("background-position", "0 0");
        that.data("id", 0);
      }
    }, 33));
  };

  $(".button").mouseover(animate)
              .mouseout (animate)
              .data({id:0, py:0, mouseover:[0,-688,-43], mouseout:[-688,0,43]});
});
/*
//current version
$(document).ready(function() {

  var animate = function(e) {
    var that = $(this);
    var data = that.data(e.type);

    that.css("background-position", "0 "+ data[0]);
    that.data("py", data[0]);
    window.clearInterval(that.data("id"));

    that.data("id", window.setInterval(function() {
      var py = that.data("py");
      py -= 43;

      if (py > data[1]) {
        that.css("background-position", "0 "+ py);
        that.data("py", py);
      } else {
        window.clearInterval(that.data("id"));
        if (e.type === "mouseout") that.css("background-position", "0 0");
        that.data("id", 0);
      }
    }, 33));
  };

  $(".button").mouseover(animate)
              .mouseout (animate)
              .data({id:0, py:0, mouseover:[0,-645], mouseout:[-645,-1247]});
});
*/
/*
//old version
$(document).ready(function() {

  var animate = function(e) {
    var that = $(this);
    var py = that.data(e.type);

    that.css("background-position", "0 "+ py);
    that.data("px", 0);
    window.clearInterval(that.data("id"));

    that.data("id", window.setInterval(function() {
      var px = that.data("px");
      px -= 134;

      if (px > -2010) {
        that.css("background-position", px +' '+ py);
        that.data("px", px);
      } else {
        window.clearInterval(that.data("id"));
        that.data("id", 0);
      }
    }, 33));
  }'

  $(".button").mouseover(animate)
              .mouseout (animate)
              .data({px:0, mouseover:0, mouseout:-43, id:0});
});
*/