document.observe('dom:loaded', function(event) {
    $$('div.entity-comment-post-tag-offensive').each(function(element) {
        new OffensiveRatingForm(element);
    });
});

var OffensiveRatingForm = Class.create({

    /**
     * Constructor rewrites the HTML to Ajax style
     */
    initialize: function(element) {
        this.element = element;
        var form = element.down();
        var button = element.getElementsBySelector("button")[0];
        this.parameters = form.serialize();
        this.serviceUrl = form.readAttribute('action');
        
        this.tagOffensiveConfirmText = form.getElementsBySelector("input[name=tag_offensive_confirm]")[0].value;
        this.taggedOffensiveText = form.getElementsBySelector("input[name=tagged_offensive]")[0].value;
        
        this.link = element.update('<a href="#offensive">' + button.firstChild.nodeValue + '</a>').down();
        this.link.observe('click', this.submitListener.bindAsEventListener(this));
    },
    
    // ========================================================================
    // Event listeners
    
    submitListener: function(event) {
        event.stop();
        
        if(confirm(this.tagOffensiveConfirmText)) {
	        new Ajax.Request(this.serviceUrl, {
	            parameters: this.parameters,
	            onSuccess: this.successListener.bindAsEventListener(this)
	        });
        }
    },
    
    successListener: function(event) {
        var updatedElement = this.element.update('<span>' + this.taggedOffensiveText + '</span>').down();
        
        try {
            new Effect.Highlight(updatedElement);
        } catch (err) {
            // Scriptaculous is not available, just ignore..
        }
    }

})