Part two - credit at bottom

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta name="text:House Points Slytherin" content="155" />
<meta name="text:House Points Ravenclaw" content="125" />
<meta name="text:House Points Gryffindor" content="130" />
<meta name="text:House Points Hufflepuff" content="80" />
<meta name="if:House Points Toggle Side" content="0" />

<title>{Title}{block:SearchPage}, {lang:Search results for SearchQuery}{/block:SearchPage}

{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />

{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<style type="text/css">

body {background-color:#ffffff;}

img {border:none;}

#blackbg {background-color:#cbcbcb; width:100px; height:1200px;}

</style>

<script type="text/javascript">

//Background and foreground
document.write ('<div style="background-image:url(http://i39.tinypic.com/2pydsew.png); width:300px; height:300px; position:fixed; bottom:0; {block:IfNotHousePointsToggleSide}right:40px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:40px;{/block:IfHousePointsToggleSide} z-index:700; border-style:solid; border-width:6px 6px 40px 6px; border-color:black;"></div>');
document.write ('<div style="background-image:url(http://i39.tinypic.com/1ztf80.png); width:300px; height:300px; position:fixed; bottom:40px; {block:IfNotHousePointsToggleSide}right:46px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:46px;{/block:IfHousePointsToggleSide} z-index:703;"></div>');

//Calculates the bar hights
var ptS = {text:House Points Slytherin};
var ptR = {text:House Points Ravenclaw};
var ptG = {text:House Points Gryffindor};
var ptH = {text:House Points Hufflepuff};

function sortNumber(a,b)
{return a - b;}

var points = [ptS, ptR, ptG, ptH];
console.log(points.sort(sortNumber));

var Total = points[3]

var tS = Math.round(150*ptS/Total);
var tR = Math.round(150*ptR/Total);
var tG = Math.round(150*ptG/Total);
var tH = Math.round(150*ptH/Total);

//Writes the divs for the coloured bars
document.write ('<div style="height:' + tS + 'px; background-image:url(http://i39.tinypic.com/so3hvr.png); width:50px; position:fixed; bottom:81px; {block:IfNotHousePointsToggleSide}right:234px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:104px;{/block:IfHousePointsToggleSide} z-index:701;"></div>');
document.write ('<div style="height:' + tR + 'px; background-image:url(http://i44.tinypic.com/2hevryt.png); width:50px; position:fixed; bottom:81px; {block:IfNotHousePointsToggleSide}right:184px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:154px;{/block:IfHousePointsToggleSide} z-index:701;"></div>');
document.write ('<div style="height:' + tG + 'px; background-image:url(http://i43.tinypic.com/358nhh5.png); width:50px; position:fixed; bottom:81px; {block:IfNotHousePointsToggleSide}right:134px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:204px;{/block:IfHousePointsToggleSide} z-index:701;"></div>');
document.write ('<div style="height:' + tH + 'px; background-image:url(http://i40.tinypic.com/t5rtrq.png); width:50px; position:fixed; bottom:81px; {block:IfNotHousePointsToggleSide}right:84px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:254px;{/block:IfHousePointsToggleSide} z-index:701;"></div>');

//Calculates cap heights
var cS = tS+64;
var cR = tR+64;
var cG = tG+64;
var cH = tH+64;

//Adds a round cap to each bar
document.write ('<div style="background-image:url(http://i40.tinypic.com/2vagxuv.png); width:50px; height:35px; position:fixed; bottom:' + cS + 'px; {block:IfNotHousePointsToggleSide}right:234px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:109px;{/block:IfHousePointsToggleSide} z-index:702;"></div>');
document.write ('<div style="background-image:url(http://i44.tinypic.com/if8shw.png); width:50px; height:35px; position:fixed; bottom:' + cR + 'px; {block:IfNotHousePointsToggleSide}right:184px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:159px;{/block:IfHousePointsToggleSide} z-index:702;"></div>');
document.write ('<div style="background-image:url(http://i41.tinypic.com/2whiiqe.png); width:50px; height:35px; position:fixed; bottom:' + cG + 'px; {block:IfNotHousePointsToggleSide}right:134px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:209px;{/block:IfHousePointsToggleSide} z-index:702;"></div>');
document.write ('<div style="background-image:url(http://i43.tinypic.com/1iyec5.png); width:50px; height:35px; position:fixed; bottom:' + cH + 'px; {block:IfNotHousePointsToggleSide}right:84px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:259px;{/block:IfHousePointsToggleSide} z-index:702;"></div>');

//Calculates marker heights
var mS = tS+90;
var mR = tR+90;
var mG = tG+90;
var mH = tH+90;

//Adds markers
document.write ('<div style="background-image:url(http://i43.tinypic.com/nziwzb.png); width:17px; height:21px; position:fixed; bottom:' + mS + 'px; {block:IfNotHousePointsToggleSide}right:232px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:141px;{/block:IfHousePointsToggleSide} z-index:704;"></div>');
document.write ('<div style="background-image:url(http://i39.tinypic.com/2z538uc.png); width:17px; height:21px; position:fixed; bottom:' + mR + 'px; {block:IfNotHousePointsToggleSide}right:179px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:196px;{/block:IfHousePointsToggleSide} z-index:704;"></div>');
document.write ('<div style="background-image:url(http://i43.tinypic.com/kx7oz.png); width:17px; height:21px; position:fixed; bottom:' + mG + 'px; {block:IfNotHousePointsToggleSide}right:125px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:249px;{/block:IfHousePointsToggleSide} z-index:704;"></div>');
document.write ('<div style="background-image:url(http://i40.tinypic.com/d8ajd.png); width:17px; height:21px; position:fixed; bottom:' + mH + 'px; {block:IfNotHousePointsToggleSide}right:71px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:302px;{/block:IfHousePointsToggleSide} z-index:704;"></div>');

//Credit - Please don't remove
document.write ('<a href="http://youdontmeanit.tumblr.com/housepoints" style="text-decoration:none;"><p style="color:white; font-size:16px; font-family:Georgia, Serif; font-weight:700; position:fixed; bottom:4px; {block:IfNotHousePointsToggleSide}right:140px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:140px;{/block:IfHousePointsToggleSide} z-index:705;">House Points</p><p style="color:#808080; font-size:12px; font-family:Georgia, Serif; font-weight:500; position:fixed; bottom:-5px; {block:IfNotHousePointsToggleSide}right:150px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:150px;{/block:IfHousePointsToggleSide} z-index:705;">Created by Eris</p></a>');

</script>

<!--[if lt IE]>
<script type="text/javascript">
//Internet Explorer Error Message for the idiots who still use that browser
document.write ('<div style="background-image:url(http://i42.tinypic.com/f0u2rr.png); height:300px; width:300px; position:fixed; bottom:46px; {block:IfNotHousePointsToggleSide}right:40px;{/block:IfNotHousePointsToggleSide}{block:IfHousePointsToggleSide}left:40px;{/block:IfHousePointsToggleSide} z-index:705;"></div>');
</script>
<![endif]-->

</head>
<body>

<div id="blackbg">

<div id="Slytherin"></div>

</div>

</body>
</html>