(function($){
 $.fn.prate = function(o) {
 		this.defaultOptions = {
 			starOn : '../img/flat-light-gold-star.png',
 			starOff: '../img/flat-light-grey-star.png',
 			starUser: '../img/flat-gold-star.png',
 			imgHeight: 32,
 			imgWidth: 32,
 			starNum: 5,
 			score: 0,
 			scoreUser: 0,
 			zindex: 0,
 			readOnly: false,
 			opacity: false,
 			hideScoreWhileSelect: true,
 			onClick: function() {}
 		}
 		
 		this.tmpScore = 0;
 		this.mouseEvents = 0;
 		o = $.extend(this.defaultOptions, o);
    return this.each(function() {
    	var elem = $(this);
    	if (elem.attr('readOnly') == '1') o.readOnly = true;
    	elem.unbind('click.prate');
    	if (!o.readOnly) {
    		elem.css('cursor', 'pointer');
    	}
    	var elemWidth = o.imgWidth * o.starNum;
    	elem.width(elemWidth);
    	elem.height(o.imgHeight);
    	elem.css('display','inline-block');
    	var template0 = "<div class='layerBackground' style='position: absolute; background:transparent url(\"" + o.starOff + "\") repeat-x;width:" + elemWidth + "px; height:" + o.imgHeight + "px;'></div>";
    	var template1 = "<div class='layerStar' style='position: absolute; background:transparent url(\"" + o.starOn + "\") repeat-x;width:0px; height:" + o.imgHeight + "px;'></div>";
   		var template2 = "<div class='layerStarUser' style='position: absolute; background:transparent url(\"" + o.starUser + "\") repeat-x;width:0px; height:" + o.imgHeight + "px;'></div>";
 	
    	elem.append(template0 + template1 + template2);
    	
    	this.setScore = function(score, scoreUser, hideScore) {
    		
    		var layerStar = elem.children('.layerStar');
    		var layerStarUser =  elem.children('.layerStarUser');
    		//adjust width
    		var scoreWidth = score * o.imgWidth;
    		layerStar.width(score * o.imgWidth);
    		layerStarUser.width(scoreUser * o.imgWidth);
    		    		
    		if (scoreUser > score) {
    			var layerHigh = layerStar;
    			var layerLow = layerStarUser;
    			var opacityHigh = 1 - o.opacity;
    		}else {
    			var layerHigh = layerStarUser;
    			var layerLow = layerStar;
    			var opacityHigh = o.opacity;
    		}
    		
    		var opacity = o.opacity;
	   		//opacity
    		if (!opacity === false) {
    			hideScore = false;
    			if (!$.browser.msie) {
    				layerHigh.css('opacity', opacityHigh);
    				layerLow.css('opacity', 1);
    			
    			} else {
    				var ieOpacity = parseInt(opacityHigh * 100);
    				if ($.browser.version < 8) {
    					layerHigh.css('filter', 'alpha(opacity=' + ieOpacity + ')');
    					layerLow.css('filter', 'alpha(opacity=100)');
    				} else {
    					layerHigh.css('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=' + ieOpacity+')');
    					layerLow.css('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=100)');
    				}
    			}
    		}
    		
    		if (hideScore) {
    			layerStar.css('visibility','hidden');
    			opacity = 1;
    		} else {
    			layerStar.css('visibility','visible');
    		}
    		//adjust z-index so both scores are visible.
    		layerHigh.css('z-index', o.zindex +2);
    		layerLow.css('z-index', o.zindex +1);
    	}

    	this.setScore(o.score, o.scoreUser);
   	
    	elem.mousemove(function(e) {
    		if (o.readOnly) return;
    		var jThis = $(this);
    		var thisOffset = jThis.offset();
    		var scoreOffset = e.pageX - thisOffset.left;
    		scoreUser = Math.ceil(scoreOffset / o.imgWidth);
    		if (scoreUser != this.tmpScore || this.mouseEvents == 0) {
    			this.tmpScore = scoreUser;
    			jThis.children('.layerStarUser').width(scoreUser * o.imgWidth);
    			this.setScore(o.score, scoreUser, o.hideScoreWhileSelect);
    		}
    		this.mouseEvents++;
    	});
    	
    	elem.mouseleave(function() {
    		if (o.readOnly) return;
    		this.setScore(o.score, o.scoreUser, false);
    		this.mouseEvents = 0;
    	});
    	
    	elem.bind('click.prate', function(e){
    		if (o.readOnly) return;
    		var jThis = $(this);
    		var thisOffset = jThis.offset();
    		var scoreOffset = e.pageX - thisOffset.left;
    		scoreUser = Math.ceil(scoreOffset / o.imgWidth);
    		o.scoreUser = scoreUser;
    		this.setScore(o.score, scoreUser, o.hideScoreWhileSelect);
  			elem.data('score', o.score);
  			elem.data('scoreUser', o.scoreUser);
  			o.onClick(scoreUser, o.score, elem);
    	});
    });
  };

})(jQuery);