var Rater = new Class({

    Implements: [Options],

    inside: false,

    options: {
        'units': 10,
        'unit_width': 11.6,
        'rating': 0,
        'onclick': function(){},
        'onmouseover': function(){},
        'onmouseout': function(){}
    },

    initialize: function(el, options)
    {
        this.setOptions(options);

        var width = this.options.units * this.options.unit_width;

        this.ul = new Element('ul', {'class': 'unit-rating'}).setStyle('width', width + 'px');

        var li = new Element('li', {'class': 'current-rating'}).inject(this.ul);

        for (i = 1; i <= this.options.units; i++)
        {
            this.ul.adopt(new Element('li')
                .adopt(new Element('a', {
                        'title': i + ' out of ' + this.options.units,
                        'class': 'r' + i + '-unit',
                        'rel': 'nofollow'
                    })
                    .addClass('rater')
                    .addEvent('click', this.rate.bindWithEvent(this, i))
//                    .addEvent('mouseover', this.mouseover.bindWithEvent(this, i))
//                    .addEvent('mouseout', function(){})
                )
            );
        }

        this.setRating(this.options.rating);

        this.ul.inject(el);

        // spinner

        this.spinner = new Element('span', {'class': 'spinner'});
        this.spinner.inject(el);
    },


    setId: function(id)
    {
        this.id = id;
    },


    setRating: function(rating)
    {
        var width = rating * this.options.unit_width;
        this.ul.getElement('.current-rating').setStyle('width', width);
    },


    rate: function(e, value)
    {
        //console.log('click ' + value);

        this.spinner.setStyle('display', 'block');

        var request = new Request.JSON({
            'url': this.options.url,
            'onComplete': this.onRateResponse.bindWithEvent(this),
            'data': Hash.toQueryString({
                'id': this.id,
                'rate': value
            })
        }).post();
    },

    onRateResponse: function(r)
    {
        this.spinner.setStyle('display', 'none');

        if (null == r)
        {
            alert('Network error');
        }
        else if(r.status == 'error')
        {
            alert('Error: ' + r.data.reason);
        }
        else if(r.status == 'success')
        {
            this.setRating(r.data.rating);
            this.options.callback(r.data);
        }
    },

    mouseover: function(e, i)
    {
//        this.options.onmouseover(i);
    },

    mouseout: function(e)
    {
        //this.options.onmouseout();
//        console.log(this.inside);
    }
})