EXP Bar Code

[zetsumei]

Annoyingly, the only way I could get this to work was to simply change the main image and the basic script. What I wanted to do was make it one single bar, but that ended up stretching the page ungodly amounts. I could alter it to be like.. 50 Lengths instead of 100 to see how it looks, if you'd like.
<script>
<!--

var showstats=true; //show actual values below bar

if (location.href.match(/action=(display|recent|userrecentposts)/)) {
td=document.getElementsByTagName('td');
for (a=0;a<td.length; a++) {
if (td[a].width=='80%' && td[a].innerHTML.match(/\[EXP=(.+?)\/(.+?)\]/i)) {
currentexp=RegExp.$1;
maxEXp=RegExp.$2;
if (maxEXp!='') {
td[a].innerHTML = td[a].innerHTML.replace(/\[EXP=(.+?)\/(.+?)\]/i,healthbar(parseInt(RegExp.$1),parseInt(RegExp.$2)));
a--;
}
}
}
}

function healthbar(currentexp,maxEXp) {
endLeftOfUpperBarGreen='<img CLSCHK src="http://i38.tinypic.com/vg1sgz.png" />';
endLeftOfUpperBarGrey='<img src="http://i36.tinypic.com/2cyo6lz.png" />';
middleOfUpperBarGrey='<img src="http://i36.tinypic.com/dmpp3n.png" />';
middleOfUpperBarGreen='<img CLSCHK src="http://i38.tinypic.com/28vyq8i.png" />';
endRightOfUpperBarGreen='<img src="http://i33.tinypic.com/t5rkee.png" />';
endRightOfUpperBarGrey='<img src="http://i37.tinypic.com/2n0lq40.png" />';
endLeftOfLowerBar='<img src="http://i34.tinypic.com/21jyuky.png" />';
greyBlip='<img src="http://i37.tinypic.com/2n6ugkx.png" />';
greenBlip='<img src="http://i38.tinypic.com/2lbj6tx.png" />';
endRightOfLowerBar='<img src="http://i291.photobucket.com/albums/ll317/Zenjin213/Persona%20Items/jzb3us2.png" />';
leftEndBracket='<img style="right:-1px; position: relative; z-index:1;" src="http://i49.tinypic.com/30mq355.png" />';

hb_result="";

var maxEXpBar = 16;

var healthlost = maxEXp-currentexp;

blipMax=Math.floor((maxEXp-1)/maxEXpBar);
greenBlipCnt=Math.floor((currentexp-1)/maxEXpBar);
greyBlipCnt=(currentexp>0 ? blipMax-greenBlipCnt : blipMax);
zeroHealth= (currentexp == 0);
// 16/18
if ((maxEXpBar * blipMax) < currentexp && maxEXp%maxEXpBar!=0) { //top HB level
chk='A';
greenBarCnt=(currentexp%maxEXpBar==0 ? (currentexp>0 ? 16: 0) : currentexp%maxEXpBar);
greyBarCnt=(maxEXp%maxEXpBar==0 ? 100 : maxEXp%maxEXpBar)-greenBarCnt; //=0
remainderCnt=(blipMax==0 ? 0 : maxEXpBar-greyBarCnt-greenBarCnt); //=0
leftEnd=(maxEXp%maxEXpBar==0 ? (currentexp==0 ? endLeftOfUpperBarGrey : endLeftOfUpperBarGreen.replace('CLSCHK',' ')) : (blipMax==0 ? leftEndBracket : endLeftOfUpperBarGreen.replace('CLSCHK','class="faded" ')) );
} else {
chk='B';
remainderCnt=0;
greenBarCnt=(currentexp%maxEXpBar==0 ? (currentexp>0 ? 15 : 1) : currentexp%maxEXpBar);
greyBarCnt=(maxEXp<maxEXpBar ? maxEXp : maxEXpBar)-greenBarCnt-1;
leftEnd=(currentexp%maxEXpBar==0 ? (currentexp==0 ? endLeftOfUpperBarGrey : endLeftOfUpperBarGreen.replace('CLSCHK',' ')) : endLeftOfUpperBarGrey );
}

hb_result="<br><table><tr><td align='right'>";
//begin upper bar construction

hb_result+=leftEnd;
for (i=0; i<remainderCnt-1; i++) hb_result += middleOfUpperBarGreen.replace('CLSCHK','class="faded" ');
hb_result+=(remainderCnt>0 ? leftEndBracket : "");
for (i=0; i<greyBarCnt; i++) hb_result+=middleOfUpperBarGrey;
for (i=0; i<greenBarCnt-1; i++) hb_result+=middleOfUpperBarGreen;
hb_result+=(zeroHealth ? endRightOfUpperBarGrey : endRightOfUpperBarGreen) + "<br>";

//begin lower bar construction
hb_result+=endLeftOfLowerBar;
for (i=0; i<greyBlipCnt; i++) hb_result+=greyBlip;
for (i=0; i<greenBlipCnt; i++) hb_result+=greenBlip;
hb_result+=endRightOfLowerBar+"<br>";

hb_result+=(showstats ? currentexp+"/"+maxEXp : '')+"</td></tr></table>";

return hb_result;
} //-->
</script>