/*
HTML EXAMPLE:
	<div id="rating-voters" class="rating-voters">
		<a href="/article/vote?articleId=328&rating=1" title="1" id="rating-voter-1" class="on">&#xa0;</a>
		<a href="/article/vote?articleId=328&rating=2" title="2" id="rating-voter-2" class="on">&#xa0;</a>
		<a href="/article/vote?articleId=328&rating=3" title="3" id="rating-voter-3" class="off">&#xa0;</a>
		<a href="/article/vote?articleId=328&rating=4" title="4" id="rating-voter-4" class="off">&#xa0;</a>
		<a href="/article/vote?articleId=328&rating=5" title="5" id="rating-voter-5" class="off">&#xa0;</a>
	</div>

CSS EXAMPLE:
#ratings-container {
	margin-bottom: 10px;
	padding: 0px;
	clear: both;
	position: relative;
	height: 22px;
	overflow: hidden;
}
#rate-status-inline {
	float: left;
	font-size: 14px;
	color: #000000;
	line-height: 22px;
	margin-right: 0.5em;
}
.rating-voters {
	float: left;
	height: 22px;
	line-height: 22px;
	overflow: hidden;
}
html .rating-voters a {
	background: url(/images/icons/rating.gif);
	background-repeat: no-repeat;
	display: block;
	float: left;
	width: 22px;
	height: 22px;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	text-decoration: none;
}
html .rating-voters a:focus {
	outline: none;
}
html .rating-voters a.on {
	background-position: 0px 0px;
}
html .rating-voters a.hover {
	background-position: 0px -44px !important;
}
html .rating-voters a.off {
	background-position: 0px -22px;
}

IMAGE REQUIREMENT:
	One image file includes all 3 states of the rating icon: on, off and hover. 
	Use background-position to change the icon state.
*/

jQuery.fn.ratingVoter = function (options) {
	var settings = jQuery.extend (
		{
			idPattern: "rating-voter-([0-9]+)",
			votersPattern: "> a",
			voterOnClick: null
		}, 
		options
	);
	this.each (
		function (i, el) {
			var voters = jQuery(el).find (settings.votersPattern);
			voters.each (
				function (i, voter) {
					jQuery.extend (
						voter, 
						{
							voted: function () {
								var re = new RegExp (settings.idPattern);
								var n = this.id.replace (re, "$1");
								voters.each (
									function (j, innerVoter) {
										if (j < n) {
											$(innerVoter).addClass ("on").removeClass ("off");
										}
										else {
											$(innerVoter).addClass ("off").removeClass ("on");
										}
									}
								)
							}
						}
					);	
				}
			)
			voters.click (
				function (e) {
					var re = new RegExp (settings.idPattern);
					if (settings.voterOnClick != null) {
						var n = e.target.id.replace (re, "$1");
						var href = e.target.href;
						settings.voterOnClick (n, href, e.target);
					}
					e.preventDefault ();
				}
			);
			voters.hover (
				function (e) {
					var re = new RegExp (settings.idPattern);
					var obj = e.target;
					var n = obj.id.replace (re, "$1");
					voters.each (
						function (i, d) {
							var d = $(d);
							if (i < n) {
								d.addClass ("hover");
							}
							else {
								d.addClass ("off");
							}
						}
					);
					e.preventDefault ();
				},
				function (e) {
					voters.each (
						function (i, d) {
							var d = $(d);
							d.removeClass ("hover");
							if (d.hasClass ("on") == false) {
								d.addClass ("off");
							}
							else {
								d.removeClass ("off");
							}
						}
					);
					e.preventDefault ();
				}
			)
		}
	);
	re = null;
	return this;
};