// JavaScript Document

var Rating = new Class({
	
	initialize: function(options) {
		this.el = $("rating-"+options.ratingType+"-"+options.ratingID);
		this.bar = $E("div.rating-bar",this.el);
		this.ratings = this.bar.getChildren();
		this.rating_id = options.ratingID;
		this.rating_type = options.ratingType;
		this.rating_type_visual = this.rating_type.substring(0,1).toUpperCase() + this.rating_type.substring(1);
		this.current_rating = options.initialRating;
		this.current_slider = options.initialRatingSlider;
		this.frozen = false;

		var event = this.mouseRating.bind(this);
		this.bar.addEvent("mouseout",this.mouseRating.bind(this));
		this.el.addEvent("mouseover",this.mouseRating.bind(this));
		var ratings = this.bar.getChildren();
		ratings.each(function(el,i){
			el.addEvent("mouseover",this.mouseOverRating.bind(this));
			el.addEvent("mouseout",this.mouseOverRating.bind(this));
			el.addEvent("click",this.rate.bind(this));
		}, this);
		
		this.resetBar();
	},
	
	mouseRating: function(event) {
		event = new Event(event);
		if (this.over)
		{
			if (!this.isOverRatingBar(event))
			{
				this.resetBar();
			}
		}
		else 
		{
			if (this.isOverRatingBar(event))
			{
				this.over = true;
			}
		}
		
		return this.over;
	},
	
	mouseOutRating: function(event) {
		event = new Event(event);
		var proceed = this.mouseRating(event);
		if (proceed)
		{
			this.setRating(event.target.innerHTML);
		}
	},
	
	mouseOverRating: function(event) {
		event = new Event(event);
		
		var proceed = this.mouseRating(event);
		if (proceed)
		{
			// Figure out which rating is being hovered
			var rating = event.target.innerHTML;
			if (rating) this.setRating(rating);
		}

	},
	
	rate: function(event) {
		event = new Event(event);
		this.rated_value = parseInt($(event.target).innerHTML);
		this.send();
	},
	
	setRating: function(rating) {
		if (this.frozen) return;
		
		this.ratings.each(function(el,i){
			el.removeClass("hover");
			
			var test_rating = parseInt(el.innerHTML);
			
			if (test_rating <= rating) el.addClass("hover");
		}, this);
	},
	
	isOverRatingBar: function(event) {
		var pos = this.bar.getPosition();
		var size = this.bar.getSize();
		
		if (event.page.x < pos.x) { return false; }
		if (event.page.x > (pos.x + size.size.x)) { return false; }
		
		if (event.page.y < pos.y) { return false; }
		if (event.page.y > (pos.y + size.size.y)) { return false; }
		return true;
	},
		
	resetBar: function() {
		this.over = false;
		this.setRating(this.current_slider);
	},
	
	send: function() {
		var url = "?guimode=ajax&action=tour_rate&scene_id=" + this.rating_id + "&rating_type=" + this.rating_type + "&rating=" + this.rated_value + "&item_rated_id=" + this.rating_id;
//		var postBody = Object.toQueryString({ id: this.rating_id, type: this.rating_type, value: this.rated_value });
		new Ajax(url, { 
				 method: "get", 
				 onComplete: this.receive.bind(this)
			}).request();
	},
	
	receive: function(ajax) {
		this.current_rating = this.rated_value;
		this.frozen = false;
		this.setRating(parseInt(this.rated_value));
		var breakdown = ajax.split(" ");
		var new_rating = parseFloat(breakdown.shift());
		var new_count = breakdown.join(" ");
		
		new_rating = new_rating.toFixed(2);
		
		var rtv = this.rating_type_visual;
		var fader = $E("div.rating_title div.fader",this.el);
		var fx = fader.effects({ duration: 500, transition: Fx.Transitions.Quart.easeOut });
		fx.start({
				'opacity': 0.05
		}).chain(function(){
			fader.setHTML("Thank you!");
			
			// Become opaque, after waiting a second
			this.start({
				'opacity': 1
			});
		}).chain(function(){
			// Become transparent
			this.start.delay(500, this, {
				'opacity': 0.05
			});
		}).chain(function(){
			fader.setHTML("<span class=\"orange\">"+new_rating+"</span> <span class=\"num_votes\">("+new_count+")</span>");
			
			// Become opaque again
			this.start({
				'opacity': 1
			});
		});
	}
	
});