/**
* Class for adding star for comments
*
* @el id of div element where will be placed stars
* @url url to template (for including images)
* @max max rating
* @text text
* @class unique adds for ids
*/

commentRating = function(el, url, max, text, cls)
{
    this.element = document.getElementById(el);

    this.cls = cls;    
    this.numStars = max;
    this.URL = url;
    this.text = text;
}

commentRating.prototype = 
{
    init: function()
    {
        if(this.element)
        {
            this.printStars();
        }
    }, 

    printStars: function()
    {
        var html = '';
        var css = '';

        css = "background: url('" + this.URL + "/img/gray.png'); ";
        css += "width: 15px; height: 15px; ";
        css += "cursor: pointer; ";
        css += "float: left;";

        for(var i = 1; i <= this.numStars; i++)
        {
            html += '<div style="' + css + '" ';
            html += 'id="'+this.cls+'rate' + i + '"';
            html += ' ></div>';
        }

        html += '<div id="'+this.cls+'rate_text" style="float: left; font-size: 11px; padding-left: 5px;">&nbsp;</div>';
        html += '<input type="hidden" name="'+this.cls+'rating" id="'+this.cls+'rating" value="" />';

        this.element.innerHTML = html;

        for(var i = 1; i <= this.numStars; i++)
        {
            this.attachEvent(this.cls+'rate' + i, i);
        }
    },

    attachEvent: function(el, item)
    {
        var cls = this.cls;
        var el = document.getElementById(el);
        var rateText = document.getElementById(cls+'rate_text');
            
        var numStars = this.numStars;
        var URL = this.URL;
        var text = this.text;
        var rating = document.getElementById(cls+'rating');
        var clicked = false;

        el.onmouseover = function()
        {
            // reset all stars 
            for(var i = 1; i <= numStars; i++)
            {
                var star = document.getElementById(cls+'rate' + i);
                star.style.background = "url('" + URL + "/img/gray.png')";
            }
            
            // selected new stars
            for(var i = 1; i <= item; i++)
            {
                var star = document.getElementById(cls+'rate' + i);
                star.style.background = "url('" + URL + "/img/gold.png')";
                rateText.innerHTML = text + '&nbsp;:&nbsp;' + i;
            }

            clicked = false;
        }
        el.onmouseout = function()
        {
            if(!clicked)
            {
                for(var i = 1; i <= item; i++)
                {
                    var star = document.getElementById(cls+'rate' + i);
                    star.style.background = "url('" + URL + "/img/gray.png')";
                    rateText.innerHTML = '&nbsp;';
                }
                rating.value = '';
            }
        }
        el.onclick = function()
        {
            for(var i = 1; i <= item; i++)
            {
                var star = document.getElementById(cls+'rate' + i);
                star.style.background = "url('" + URL + "/img/gold.png')";
            }

            rating.value = item;
            clicked = true;
        }
    }
}