RatingControl = Class.create();
RatingControl.prototype = {
    initialize: function (options) {
        this.setOptions(options);
		this.initEventDelegates();
		this.items = new Array();
    },
    setOptions: function(options) {
        // default options
        this.options = {
            cssClass: "rating-container",
            itemCssClass: "item",
 			itemOverCssClass: "item-over",
            targetId: null,
			minValue: 0,
			maxValue: 5,
			itemsCount: 5,
			title: "Rating"
        }
        Object.extend(this.options, options || {});
    },
	initEventDelegates: function() {
		this.mouseOverDelegate = this.onMouse_Over.bind(this);
		this.mouseOutDelegate = this.onMouse_Out.bind(this);
		this.mouseClickDelegate = this.onMouse_Click.bind(this);
	},
	addEventListeners: function(container, items) {
		Event.observe(container, "mouseover", this.mouseOverDelegate);
		Event.observe(container, "mouseout", this.mouseOutDelegate);
		Event.observe(container, "click", this.mouseClickDelegate);
	},
	removeEventListeners: function(container, items) {
		Event.stopObserving(container, "mouseover", this.mouseOverDelegate);
		Event.stopObserving(container, "mouseout", this.mouseOutDelegate);
		Event.stopObserving(container, "click", this.mouseClickDelegate);
	},
	show: function() {
	    var targetControl = $(this.options.targetId);
	    if (targetControl) {
    		Element.hide(this.options.targetId);
    		this.container = $(this.options.targetId).parentNode;
    		var stepValue = (this.options.maxValue - this.options.minValue) / this.options.itemsCount;
    		for(var i = 0; i < this.options.itemsCount; i++) {
    			var item = this.buildItem(i, stepValue);
    			this.container.appendChild(item);
    			this.items[i] = item;
    		}
    		this.addEventListeners(this.container, this.items);
    		this.container.title = this.options.title;
		}
	},
	hide: function() {
		Element.hide(this.container);
	},
	buildItem: function(index, stepValue) {
		var element = document.createElement("DIV");
		element.value = index + stepValue;
		element.index = index;
		element.className = this.options.itemCssClass;
		element.title = this.options.title + ":" + element.value;
		return element;
	},

	onMouse_Over: function(EventObj) {
		//set acive syle for items
		var senderObj = Event.element(EventObj);
		if (senderObj) {
			for(var i = 0; i <= senderObj.index; i++) {
				this.items[i].className = this.options.itemOverCssClass;
			}
			for(var i = senderObj.index + 1; i < this.options.itemsCount; i++) {
				this.items[i].className = this.options.itemCssClass;
			}

		}
	},
	onMouse_Out: function(EventObj) {
		//restore default items style
		var ratingValue = $(this.options.targetId).value;
		var className = this.options.itemCssClass;
		for(var i = this.options.itemsCount - 1; i >= 0; i--) {
			if (this.items[i].value == ratingValue) {
				className = this.options.itemOverCssClass;
			}
			this.items[i].className = className;
		}
	},
	onMouse_Click: function(EventObj) {
		// set new styles for items
		var senderObj = Event.element(EventObj);
		if (senderObj) {
			$(this.options.targetId).value = senderObj.value;
		}
	}

}