jQuery.fn.numerize = function() {
    $(this).html(function(index,html){
        return (numerize(html));
    });
}

function numerize(number) {
    numberHeight=35;
    numberWidth=40;
    separatorWidth=6;
    commonCss={
        "background-image": "url('images/number.gif')",
        "height": "35px",
        "display":"block",
        "width":"40px",
        "float":"left",
        "text-indent":"-1000px",
        "overflow":"hidden"
    }
    if (number.indexOf(",")!=-1) {
        separator = ",";
    }
    if (number.indexOf(".")!=-1) {
        separator = ".";
    }
    if (typeof (separator)!="undefined"){
        
        twonumbers = number.split(separator);
        if(twonumbers[1]< 10){
          twonumbers[1] = (number - twonumbers[0])*100; 
        }
		
        xbefOffset = 0;
		
        if (twonumbers[0]<10) {
            xbefOffset = -numberWidth
        }
		
        ybefOffset = -(twonumbers[0]*numberHeight);
        beforeSeparator = $("<span/>");
		
        $(beforeSeparator).css(commonCss);
		
        $(beforeSeparator).css({
            "background-position": xbefOffset+"px "+ybefOffset+"px "
        });
		
        $(beforeSeparator).html(twonumbers[0]);
		
        separatorHtml = $("<span>"+separator+"</span>");
        $(separatorHtml).css(commonCss);
        $(separatorHtml).css("width",separatorWidth+"px");
        $(separatorHtml).css("background-position", -2*numberWidth+"px 0px");

        xafOffset = 0;
		
        yafOffset = -(twonumbers[1]*numberHeight);
        afterSeparator = $("<span/>");
        $(afterSeparator).css(commonCss);
        $(afterSeparator).css({
            "background-position": xafOffset+"px "+yafOffset+"px "
        });

        afterSeparator.html(twonumbers[1]);
		
        returnedString = $("<span class=\"numerized\"/>");
		
        $(returnedString).append(beforeSeparator);
        $(returnedString).append(separatorHtml);
        $(returnedString).append(afterSeparator);
		
        return returnedString;

    }
    else
        return (number);

}