Altoholic Anonymous

<!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) -->
<!-- Wow X of Y version with name edited by Altoholic Anonymous (musings.altoholicanonymous.com) -->
    <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5
         License (http://creativecommons.org/licenses/by-sa/2.5/) -->
    <style type="text/css">
      div.smallish-progress-wrapper
      {
        /* Don't change the following lines. */
        position: relative;
        border: 1px solid black;
        background-color:transparent;
      }

      div.smallish-progress-bar
      {
        /* Don't change the following lines. */
        position: absolute;
        top: 0; left: 0;
        height: 100%;
      }

      div.smallish-progress-text
      {
        /* Don't change the following lines. */
        text-align: center;
        position: relative;
        /* Add your customizations after this line. */
      }
    </style>

    <!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) -->
    <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5
         License (http://creativecommons.org/licenses/by-sa/2.5/) -->
    <script type="text/javascript">
      function nameddrawProgressBar(color, width, percent, total, cname)
      {
        var pixels = width * (percent / total);

        document.write('<div style="width: ' + width + 'px" class="smallish-progress-wrapper">');
        document.write('<div style="width: ' + pixels + 'px; background-color: ' + color + ';" class="smallish-progress-bar"></div>');
        document.write('<div style="width: ' + width + 'px" class="smallish-progress-text">' + cname + ': ' + percent + ' of ' + total + '</div>');
        document.write('</div>');
      }
    </script>


<!-- You are going to change the info in the parenthesis to suit your needs. The first entry is the color in hex, the second is the bar length, the third is your character level, the fourth is the maximum levels available, the fifth is your character name. This can also be applied to other things, such as progression. You can give a bar a width of 200 and list 13 and 14 with an entry of Ulduar and the bar will instead display Ulduar 13 of 14. -->
Paladin
<script type="text/javascript">nameddrawProgressBar('#F58CBA', 200, 13, 80, 'Charactername');</script>

Shaman
<script type="text/javascript">nameddrawProgressBar('#2459FF', 200, 27, 80, 'Charactername');</script>

Hunter
<script type="text/javascript">nameddrawProgressBar('#ABD473', 200, 63, 80, 'Charactername');</script>

Druid
<script type="text/javascript">nameddrawProgressBar('#FF7D0A', 200, 40, 80, 'Charactername');</script>

Death Knight
<script type="text/javascript">nameddrawProgressBar('#C41F3B', 200, 75, 80, 'Charactername');</script>

Priest
<script type="text/javascript">nameddrawProgressBar('#DDDDDD', 200, 73, 80, 'Charactername');</script>

Mage
<script type="text/javascript">nameddrawProgressBar('#69CCF0', 200, 72, 80, 'Charactername');</script>

Warrior
<script type="text/javascript">nameddrawProgressBar('#C79C6E', 200, 79, 80, 'Charactername');</script>

Rogue
<script type="text/javascript">nameddrawProgressBar('#FFF569', 200, 37, 80, 'Charactername');</script>

Warlock
<script type="text/javascript">nameddrawProgressBar('#9482C9', 200, 33, 80, 'Charactername');</script>