Club Drupal

/**

 * Create a degradeable star rating interface out of a simple form structure.

 *

 * Originally based on the Star Rating jQuery plugin by Wil Stuckey:

 * http://sandbox.wilstuckey.com/jquery-ratings/

 */

(function($){ // Create local scope.

Drupal.behaviors.fivestar = {

  attach: function (context) {

    $('div.fivestar-form-item').once('fivestar', function() {

      var $this = $(this);

      var $container = $('<div class="fivestar-widget clearfix"></div>');

      var $select = $('select', $this);

      // Setup the cancel button

      var $cancel = $('option[value="0"]', $this);

      if ($cancel.length) {

        $('<div class="cancel"><a href="#0" title="' + $cancel.text() + '">' + $cancel.text() + '</a></div>')

          .appendTo($container);

      }

      // Setup the rating buttons

      var $options = $('option', $this).not('[value="-"], [value="0"]');

      var index = -1;

      $options.each(function(i, element) {

        var classes = 'star-' + (i+1);

        classes += (i + 1) % 2 == 0 ? ' even' : ' odd';

        classes += i == 0 ? ' star-first' : '';

        classes += i + 1 == $options.length ? ' star-last' : '';

        $('<div class="star"><a href="#' + element.value + '" title="' + element.text + '">' + element.text + '</a></div>')

          .addClass(classes)

          .appendTo($container);

        if (element.value == $select.val()) {

          index = i + 1;

        }

      });

      $container.find('.star:lt(' + index + ')').addClass('on');

      $container.addClass('fivestar-widget-' + ($options.length));

      $container.find('a')

        .bind('click', $this, Drupal.behaviors.fivestar.rate)

        .bind('mouseover', $this, Drupal.behaviors.fivestar.hover);

      $container.bind('mouseover mouseout', $this, Drupal.behaviors.fivestar.hover);

      // Attach the new widget and hide the existing widget.

      $select.after($container).css('display', 'none');

    });

  },

  rate: function(event) {

    var $this = $(this);

    var $widget = event.data;

    var value = this.hash.replace('#', '');

    $('select', $widget).val(value).change();

    var $this_star = $this.closest('.star');

    $this_star.prevAll('.star').andSelf().addClass('on');

    $this_star.nextAll('.star').removeClass('on');

    event.preventDefault();

  },

  hover: function(event) {

    var $this = $(this);

    var $widget = event.data;

    var $target = $(event.target);

    var $stars = $('.star', $this);

    if (event.type == 'mouseover') {

      var index = $stars.index($target.parent());

      $stars.each(function(i, element) {

        if (i <= index) {

          $(element).addClass('hover');

        } else {

          $(element).removeClass('hover');

        }

      });

    } else {

      $stars.removeClass('hover');

    }

  }

};

})(jQuery);