/**
 * Estrellas
 * html:
 * <div id="r1" class="radioOff star"></div>
 * <div id="r2" class="radioOff star"></div>
 * <div id="r3" class="radioOff star"></div>
 * ...
 * Usar css: stars.css
 */
function setStarts() {
  $(".star").each(function() {
    // mouse over - pone estrellas
    $(this).mouseover(function() {
      var id = $(this).attr('id');
      id = id.substr(1,id.length);
      for(i=1;i <= id;i++) {
        if (!$("#r" + i).hasClass('selected')) {
          starOn(i);
        }
      }
    });
    
    // mouse out - saca estrellas
    $(this).mouseout(function() {
      var id = $(this).attr('id');
      id = id.substr(1,id.length);
      for(i=1;i <= id;i++) {
        if (!$("#r" + i).hasClass('selected')) {
          starOff(i);
        }
      }
    });
    
    // mouse click - fija estrellas
    $(this).click(function() {
      var id = $(this).attr('id');
      id = id.substr(1,id.length);
      for(i=1;i <= id;i++) {
        starOn(i);
        $("#r" + i).addClass('selected');
        $("#rating").val(id);
      }
      if (id < 5) {
        for(c = parseInt(id); c <= 5; c++) {
          starOff(c+1);
          $("#r" + (c+1)).removeClass('selected');
        }
      }
    });
  });
}

function starOn(id) {
  $("#r" + id).addClass('radioOn');
  $("#r" + id).removeClass('radioOff');
}

function starOff(id) {
  $("#r" + id).removeClass('radioOn');
  $("#r" + id).addClass('radioOff');
}