$.fn.bg_position = function(){
    var args = arguments[0] ||
    {};
    var t = args.t;
    var e = args.e;
    var rb = parseInt(t.css("borderRightWidth").substring(0, t.css("borderRightWidth").length - 2));
    var pos = t.position();
    var x = e.pageX - pos.left - rb;
	
	//$(".button p").html("e.pageX: "+e.pageX+" - pos.left:"+pos.left+" - "+rb);
    return x;
}

$(document).ready(function(){
    var over = 0;
    
    $(".button").live("mousemove", function(e){
        var t = $(this);
        var x = t.bg_position({
            t: t,
            e: e
        });
        if (over == 0) {
            over = 1;
            t.stop().animate({
                backgroundPosition: -225 + x + "px 0"
            }, 100, function(){
                over = 2;
            });
        }
        if (over == 2) {
            t.css("background-position", -225 + x + "px 0")
        }
    });
    
    $(".button").live("mouseout", function(e){
        var t = $(this);
        var w = t.width();
        var x = t.bg_position({
            t: t,
            e: e
        });
        
        t.stop();
        if (x > (w / 2)) {
            t.animate({
                backgroundPosition: "0px 0"
            }, 200);
        }
        else {
            t.animate({
                backgroundPosition: "-300px 0"
            }, 200);
        }
        over = 0;
    });
})