Hearts == rating

by James Doyle

HTML

<div id="status">0</div>
<ul id='likes'>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

CSS

/* mid-point = 102px */
ul {
  display: block;
  margin: 0;
  padding: 0;
  height: 200px;
  width: 832px;
}
ul li {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  display:block;
  width: 104px;
  height: 200px;
  background: url(https://dl.dropbox.com/u/6913105/heart-reverse.png) 0 0 #333;
}
ul li:nth-child(2n) {
  background: url(https://dl.dropbox.com/u/6913105/heart-reverse.png) 98px 0 #333;
}

ul li:hover, ul li.on {
  background-color: #C72828;
}

JavaScript

$('#likes').on('mouseout', function() {
    $('#likes li').removeClass('on');
});
$('#likes li').each(function(index) {
    $(this).on('mouseover', function() {
        for (var i = 0; i < index + 1; i++) {
            var x = $('ul li')[i];
            $(x).toggleClass('on');
            var num = Math.ceil((index/7)*10);
            num==0&&(num=1);
            $('#status').html(num);
        }
    });
});