jQuery.fn.rate = function(options) {
	var settings = {
        total: 5,
        cur  : 1
    }
    if (options) {
        jQuery.extend(settings, options)
    }
    var container = jQuery(this)
    if (container.attr('rel') != 0) {
        settings.cur = container.attr('rel')
    }
    container.html('')
	for (var i= 1; i <= settings.total ; i++) {
		var size = i
        var div = '<div class="star"><a href="#'+i+'">'+i+'</a></div>'
        container.append(div)
	}
	var stars = jQuery(container).children('.star')
	stars
        .mouseover( function() {
            event.drain()
            event.fill(this)
        })
        .mouseout( function() {
            event.drain()
            event.reset()
        })
        .focus( function() {
            event.drain()
            event.fill(this)
        })
        .blur( function() {
            event.drain()
            event.reset()
        })
        .click( function() {
            settings.cur = stars.index(this) + 1
            container.attr('rel', settings.cur)
            return false
        })
    
    var event = {
        fill: function(el) { // fill to the current mouse position.
            var index = stars.index(el) + 1
            stars
                .children('a').css('width', '100%').end()
                .filter(':lt('+index+')').addClass('hover').end()
        },
        drain: function() { // drain all the stars.
            stars
                .filter('.on').removeClass('on').end()
                .filter('.hover').removeClass('hover').end()
        },
        reset: function() { // Reset the stars to the default index.
            stars.filter(':lt('+settings.cur+')').addClass('on').end()
        }
    }
    event.reset()
    return this
}