/**
 * @cfg config:
 *      container {jQuery/String/Element}
 *      selected  {Number}  0 - 5
 *      percents  {Number}  0 - 100
 */
WR.stars = function(config) {
    if (typeof config == 'string')
        config = { container: config };
    $.extend(this, config);
    if (!this.lazyRender)
        this.render();
};

WR.stars.prototype = {
    texts: {
        PREFIX: '+',
        SELECTED: ' (ваш выбор)',
        RESET: 'сбросить мой голос'
    },
    
    lazyRender: false,
    percents: 0.0,
    totalScore: 0.0,
    selected: 0,
    votes: 0,
    hideEmpty: false, // not tested yet
    allowCancelVote: true,
    ajax: true,
    objectId: null,
    url: '/objects/{{ objectId }}/ajax/vote-with-{{ score }}/',
    
    template: [
        '<span class="rating-5-stars">',
            '<a href="#reset" class="reset-my-vote"><span>[x]</span></a>',
            '<span class="stars-container">',
                '<span class="current-rating"><span class="percents-line" style="width: 0.0%"></span></span>',
                '<span class="stars-mask"></span>',
                '<a class="star-1" title="" href="#"><span></span></a> ',
                '<a class="star-2" title="" href="#"><span></span></a> ',
                '<a class="star-3" title="" href="#"><span></span></a> ',
                '<a class="star-4" title="" href="#"><span></span></a> ',
                '<a class="star-5" title="" href="#"><span></span></a> ',
                '<span class="ajax-voting-mask"></span>',
            '</span>',
            '<span class="total-score">0</span> ',
            '<span class="votes-counter">0</span>',
        '</span>'
    ].join(''),
    
    container: null,
    el: null,
    rendered: false,
    
    render: function() {
        if (this.rendered)
            return false;
            
        var el = this.el = $(this.template).appendTo(this.container),
            self = this;
        
        function handleLinkClick(e) {
            if (self.ajax) {
                e.preventDefault();
                var mask = el.find('.ajax-voting-mask');
                mask.show();
                $.get(this.href, function(res) {
                    mask.hide();
                    try {
                        var upd = $.parseJSON(res);
                        $.extend(self, upd);
                        self.update(); 
                    } catch(e) {
                        // wrong JSON format
                    }
                });                
            }
        }
        
        // rendering A-tags (links)
        el.find('a[class^=star-]')
            .each(function(i) {
                i++;
                var text = self.texts['PREFIX'] + i;
                $(this).find('span').text(text);
                this.href = self.url.replace('{{ objectId }}', self.objectId).replace('{{ score }}', i);
            })
            .click(handleLinkClick);
            
        
        // render reset button
        var reset = el.find('.reset-my-vote')[0];
        if (reset) {
            reset.title = self.texts['RESET'];
            reset.href = this.url.replace('{{ objectId }}', this.objectId).replace('{{ score }}', 0);
            $(reset).click(handleLinkClick);
        }
        
        this.rendered = true;
        this.update();
    },
    
    update: function(config) {
        if (!this.rendered)
            return false;
        
        var self = this, el = this.el;
        
        if (config)
            $.extend(this, config);
        
        // reset all stars
        el.find('.selected-star').removeClass('selected-star');
        el.find('a[class^=star-]').each(function(i) { this.title = self.texts['PREFIX'] + i; });
        
        // update selected star if presented
        var cur = el.find('a.star-' + this.selected).addClass('selected-star');
        if (cur[0])
            cur[0] .title += self.texts['SELECTED'];
        
        // current score
        el.find('.current-rating .percents-line').width(this.percents + '%');
        this.totalScore = 5 * this.percents / 100;
        // get decimal separator
        var sep = (1.1).toLocaleString().substring(1, 2);
        // set score view to X.XX
        var t = this.totalScore,
            fr = '' + Math.round(t * 100);
        fr = fr.substr(fr.length - 2);
        t = ('' + t).replace(/(\.\d+)?$/, sep + fr);
        // view total score
        var total = el.find('.total-score').text(t);
        // show or hide empty score
        if (!this.totalScore && this.hideEmpty)
            total.hide();
        else
            total.show();
        
        // current votes
        var votes = el.find('.votes-counter');
        votes.text(this.votes);
        if (!this.votes && this.hideEmpty)
            votes.hide();
        else
            votes.show();
            
        // reset button
        var reset = el.find('.reset-my-vote');
        if (!(this.selected * 1) || !this.allowCancelVote)
            reset.hide();
        else
            reset.show();
    }
};

WR.stars.create = function(config) { return new WR.stars(config); };

// (function() {
//     if (!WR.stars.PATH) {
//         WR.stars.PATH = $('script[src*=five_stars/js/stars.js]').attr("src").replace(/js\/stars\.js.*$/, '');
//         $('<link type="text/css" rel="stylesheet" href="' + WR.stars.PATH + 'css/stars.css' + '" />').appendTo('head');
//     }
// })();