var SmallRatingWidget = Class.create();

SmallRatingWidget.prototype = {
    initialize: function(tag_id, default_rating) {
        var obj = this;
        this.rating = default_rating || 0;
        this.tag_id = tag_id
        this.rating_field = $$('#' + tag_id + ' .rating_field')[0];
        this.rating_field.value = this.rating
        this.changeRating(this.rating)
        $$('#'+tag_id+' img').each(
            function(n) {
                var grade = n.className.toArray().last();
                Event.observe(n, 'click', function() { obj.changeRating(grade);obj.rate() });
                Event.observe(n, 'mouseover', function() { obj.hoverRating(grade) });
                Event.observe(n, 'mouseout', function() { obj.changeRating(obj.rating) });
            }
        );
    },

    getFullStar: function(num) {
        return $$('#' + this.tag_id + ' .full_star_' + num)[0]
    },

    getEmptyStar: function(num) {
        return $$('#' + this.tag_id + ' .empty_star_' + num)[0]
    },

    rate: function() {
        new Ajax.Request('/photos/rate', { method: 'post', asynchronous: true, evalScripts: true, parameters:Form.serialize($$('#'+this.tag_id+' .photo_rating_form')[0])})
    },

    changeRating: function(num) {
        this.rating = num;
        this.swapStar(num);
        this.rating_field.value = num * 2
    },

    hoverRating: function(num) {
        this.swapStar(num);
    },

    swapStar: function(num) {
        var obj = this;
        $R(1, num).each(function(n) { obj.fillStar(n) });
        if (num < 5) {
            $R(parseInt(num)+1, 5).each(function(n) { obj.emptyStar(n) });
        }
    },

    fillStar: function(num) {
        // this.getFullStar(num).show();
        this.getFullStar(num).style.display = 'block';
        this.getEmptyStar(num).hide();
    },

    emptyStar: function(num) {
        this.getFullStar(num).hide();
        // this.getEmptyStar(num).show();
        this.getEmptyStar(num).style.display = 'block';
    }
};