Fire JS Bin - What-are-your-odds

$(document).ready(function () {
  var people = "";
  for (var i = 0; i < 100; i++) {
    people += '<div class="person plain" id="' + i + '"><span></span></div>'
  }
  $("#People").append(people);
  var causes = {
    cvd: {
      name: "Cardiovascular disease",
      count: 29,
      extra: "Ischemic heart disease, Stroke, Hypertensive heart disease, Inflammatory heart disease, Rheumatic heart disease",
      css_class: "cvd"
    },
    ipd: {
      name: "Infectious and parasitic disease",
      count: 23,
      extra: "Respiratory infections, HIV/AIDS, Diarrhea diseases, Tuberculosis, Malaria, Childhood diseases, other STDs, Meningitis, other tropical diseases, Hepatitis B, Hepatitis C",
      css_class: "ipd"
    },
    can: {
      name: "Cancer",
      count: 12,
      extra: "Lung, Stomach, Colorectal, Liver, Breast, Esophageal, Lymphoma, Oral and oropharynx, Prostate, Leukemia, Cervical, Pancreatic, Bladder, Ovarian, Uterine, Melanoma",
      css_class: "can"
    },
    res: {
      name: "Respiratory disease",
      count: 6,
      extra: "Chronic obstructive pulmonary disease, Asthma",
      css_class: "res"
    },
    uin: {
      name: "Unintentional injury",
      count: 6,
      extra: "Road traffic accidents, Falls, Drowning, Poisoning, Fires",
      css_class: "uin"
    },
    per: {
      name: "Perinatal condition",
      count: 4,
      extra: "Complications immediately before or after childbirth",
      css_class: "per"
    },
    dig: {
      name: "Digestive disease",
      count: 3,
      extra: "Cirrhosis of the liver, Peptic ulcer disease.",
      css_class: "dig"
    },
    iin: {
      name: "Intentional injury",
      count: 3,
      extra: "Suicide, Violence, War",
      css_class: "iin"
    },
    psy: {
      name: "Neuropsychiatric disorder",
      count: 2,
      extra: "Alzheimer's disease and other dementias, Epilepsy, Parkinson's disease, Alcohol use disorders, Drug use disorders",
      css_class: "psy"
    },
    dia: {
      name: "Diabetes mellitus",
      count: 2,
      extra: "Nephritis/nephropathy, Benign prostatic hyperplasia",
      css_class: "dia"
    },
    gen: {
      name: "Genitourinary system disease",
      count: 1,
      extra: "Protein-energy malnutrition, Iron deficiency anemia",
      css_class: "gen"
    },
    inm: {
      name: "Ninja monkey attack",
      count: 1,
      extra: "Seriously. It could happen.",
      css_class: "inm"
    }
  };
  for (var cause in causes) {
    var c = causes[cause];
    c.affected = [];
    for (var i = 0; i < c.count; i++) {
      c.affected.push(Math.floor(Math.random() * 101))
    }
    $("#Causes ul").append('<li class="' + cause + ' plain">' + c.name + " <em>" + c.count + '%</em><div class="tt-wrapper"><div>' + c.extra + "</div></div></li>")
  }
  $("#People").delegate(".person", "click", function () {
    $(".you").removeClass("you border");
    $(this).addClass("you border")
  });
  $("li em").hide();
  $("#Live a").click(function (e) {
    e.preventDefault();
    var personId = Number($(".you").attr("id"));
    if (isNaN(personId)) {
      alert("What, you don't exist? Please select yourself first.")
    } else {
      var causesOfDeath = [];
      for (var cause in causes) {
        var c = causes[cause];
        $.each(c.affected, function (i) {
          $("#" + c.affected[i]).addClass(c.css_class);
          if (c.affected[i] === personId) {
            causesOfDeath.push(c)
          }
        })
      }
      if (causesOfDeath.length !== 0) {
        randChoice = Math.floor(Math.random() * (causesOfDeath.length));
        finalCause = causesOfDeath[randChoice];
        $(".you").attr("class", "person plain you border " + finalCause.css_class);
        var message = "I'm terribly sorry. Unfortunately you have died as a result of <strong>" + finalCause.name + "</strong>";
        var cssClass = "darn"
      } else {
        var message = "Congratulations! You have beaten the odds and lived a <strong>Long and happy life!</strong>";
        var cssClass = "yay"
      }
      var result = '<div id="Result" class="' + cssClass + '">' + message + '<div id="Links"><a href="#" id="Show">Show details</a> | <a href="#" id="Again">Reincarnate?</a></div></div>';
      $("#Instructions").fadeOut("slow", function () {
        $(result).appendTo($("#Actions")).hide().fadeIn("slow")
      });
      $("#Actions").delegate("#Show", "click", function (e) {
        e.preventDefault();
        $("li em").show();
        $(".plain").removeClass("plain");
        $(".you").removeClass("you");
        $("li").hover(function () {
          $(this).find(".tt-wrapper").fadeIn("fast")
        }, function () {
          $(this).find(".tt-wrapper").fadeOut("fast")
        })
      });
      $("#Actions").delegate("#Again", "click", function (e) {
        e.preventDefault();
        location.reload()
      })
    }
  })
});

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8" />
    <title>What are your odds?</title>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <h1>What are your odds?</h1>
    <p id="Tagline">
      — Because we've all got to go some time —
    </p>
    <div id="Actions">
      <div id="Instructions">
        <p>
          The crowd of 100 people below have the leading causes of death dispersed
          randomly among them accordingly with their prevalence. Choose one to represent
          yourself, summon all the luck you have at your disposal, and then click
        </p>
        <div id="Live">
          <a href="#">live your life!</a>
        </div>
      </div>
    </div>
    <div id="Board">
      <div id="People"></div>
      <div id="Causes"><ul></ul></div>
    </div>
    <p id="Footer">
      Data from <a href="http://en.wikipedia.org/wiki/List_of_causes_of_death_by_rate#Causes_Ranked_by_Frequency" title="Well, except for the ninja monkeys. I made that part up.">Wikipedia</a>.   
      Built by <a href="http://www.centripetal.ca/">Dieter Limeback</a>.
    </p>
  </body>

</html>

body { background:#171427; font-family:Palatino, "Times New Roman", Times, serif; width:710px; margin:60px auto; color:#bababa; font-size:16px; line-height:22px; }
a { outline:none; }
h1 { color:#c5d700; text-shadow:1px 1px 0 rgba(0, 0, 0, 1); font-size:60px; text-align:center; margin:0; font-family:"Droid Sans", Helvetica, Arial, sans; font-weight:bold; letter-spacing:-1px; }
#Tagline { font-style:italic; color:#4c6772; text-align:center; font-size:20px; padding:20px 0 5px; }
#Actions { height:120px; }
#Live { margin:10px auto 0 auto; text-align:center; }
#Live a { border:1px solid #b5ff88; color:#FFF; display:block; font-family:"Lucida Grande", Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; padding:5px 20px; text-decoration:none; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.4); text-transform:uppercase; width:120px; margin:0 auto; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; -moz-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000; background:#46b206; background-image:-moz-linear-gradient(top, #9ad478, #46b206); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #9ad478), color-stop(1, #46b206)); }
#Live a:hover { -moz-box-shadow:0 0 4px #fff; -webkit-box-shadow:0 0 4px #fff; box-shadow:0 0 4px #fff; }
#Live a:active { background:#9ad478; background-image:-moz-linear-gradient(top, #46b206, #9ad478); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #46b206), color-stop(1, #9ad478)); }
#Result { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:20px; font-size:18px; text-align:center; position:relative; height:80px; }
.yay { background:#fff; background-image:-moz-linear-gradient(top, #fff, #bee4ff); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #bee4ff)); color:#777; -moz-box-shadow:0 0 15px #fff; -webkit-box-shadow:0 0 15px #fff; box-shadow:0 0 15px #fff; }
.darn { background:#000; }
#Result strong { display:block; font-size:30px; margin:15px 0 20px; font-family:"Droid Sans", Helvetica, Arial, sans; letter-spacing:-1px; -moz-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); -webkit-transform:rotate(-1.5deg); }
.yay strong { color:#193a76; }
.darn strong { color:#900; }
#Links { position:absolute; right:15px; bottom:5px; font-family:"Lucida Grande", Helvetica, Arial, sans-serif; font-size:12px; }
#Links a { color:#7896ff; text-decoration:none; }
#Links a:hover { color:#fff; border-bottom:1px dotted; }
.yay #Links a:hover { color:#333; }
#Board { background:#1e1a2d; float:left; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin:30px 0 0 0; */ padding:5px; width:700px; }
#People { float:left; width:500px; }
.person { background:#555; width:38px; height:38px; float:left; margin:5px; border:1px solid #1E1A2D; }
.person.you { background:#ddd; }
.person.border { border:1px solid #ddd; }
.person span { background:url(/attach/person-mask.png) no-repeat center; position:absolute; width:38px; height:38px; cursor:pointer; }
#Causes { float:left; width:200px; }
ul { list-style-type:none; font-family:"Lucida Grande", Helvetica, Arial, sans-serif; font-size:14px; margin:15px 0 0 0; padding:0; line-height:16px; width:190px; }
li { margin:0 0 10px 10px; font-weight:bold; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:3px 5px; position:relative; }
li em { font-style:normal; color:#444; }
.tt-wrapper { display:none; position:absolute; top:0; left:183px; width:200px; z-index:9999; font-weight:normal; background:url(/assets/arrow.png) no-repeat 0 3px; }
.tt-wrapper div { background:#ffc; padding:5px; font-size:11px; color:#222; margin-left:9px; }
.inm { color:#fff; background:#937; }
.per { color:#fff; background:#304eea; }
.dia { color:#fff; background:#699; }
.gen { color:#fff; background:#6752b7; }
.psy { color:#fff; background:#73c772; }
.iin { color:#fff; background:#cc3; }
.dig { color:#fff; background:#693; }
.uin { color:#fff; background:#c03; }
.res { color:#fff; background:#94acff; }
.can { color:#fff; background:#019382; }
.ipd { color:#fff; background:#fd51d2; }
.cvd { color:#fff; background:#f90; }
.plain { color:#bababa; background:#555; }
li.plain { background:none; }
#Footer { clear:both; font-size:10px; font-family:"Lucida Grande", Helvetica, Arial, sans-serif; color:#666; }
#Footer a { color:#999; text-decoration:none; font-weight:bold; }
#Footer a:hover { color:#fff; border-bottom: 1px dotted; }