// mootools star rating system class by dimitar christoff <christoff@gmail.com>
// v3.0 for mootools 1.2.3
// last modified: 11/08/2009 11:53:13

var mooRating = new Class({
    Implements: [Options, Events],
    options: {
        // defaults
        addEvents: true,
        rate: 0,
        targetObject: false,
        background: '#fff', // vote cell background
        colourBase: '#f4edaf', // start colour (left side)
        colourTarget: '#f9e526', // end colour (right side)
        maxStars: 5, // number of stars
        starWidth: 24, // box with
        starHeight: 22, // box height
        starSpacing: 0, // space between stars
        imageURL: "/images/star.gif", // url to box background image
        tipPadding: 8, // padding around the vote text
        tipSize: "12px", // size of text in tip
        tipShown: false, // toggle tips
        border: "1px solid #ffffff", // border around the "stars"
        clickEvent: $empty() // what to pass as a function on click
    },
    initialize: function(options) {
        this.setOptions(options);
        this.options.rate = this.options.rate.toInt();
        this.draw();
    },
    draw: function() {
        if (!this.options.targetObject)
            return false;

        this.options.targetObject.empty();
        this.ratinger = new Element("div", {
            styles: {
                height: this.options.starHeight,
                width: (this.options.starWidth + this.options.starSpacing + 2) * this.options.maxStars,
                "margin-top": 4,
                float: "left"
            }
        });

        for (ii = 1; ii <= this.options.maxStars; ii++) {
            var bgc = this.options.background, percent = ((ii / this.options.maxStars) *100).round(), targetgbc = new Color(this.options.colourBase).mix(this.options.colourTarget, percent);

            new Element("div", {
                "class": (this.options.addEvents) ? "cur rating"+this.options.targetObject.id : "rating"+this.options.targetObject.id,
                "data-index": ii,
                id: "v"+ii,
                "data-colour": targetgbc,
                styles: {
                    border: this.options.border,
                    height: this.options.starHeight,
                    width: this.options.starWidth,
                    "margin-right": this.options.starSpacing,
                    float: "left",
                    "background-color": bgc,
                    "background-image": "url("+this.options.imageURL+")",
                    "background-repeat": "no-repeat",
                    "background-position": "center center"
                }
            }).store("related", this.options.targetObject.id).inject(this.ratinger);
        }


        this.ratinger.inject(this.options.targetObject.empty());

        if (this.options.tipShown) {
            new Element("div", {
                html: (this.options.rate + " / " + this.options.maxStars),
                styles: {
                    float: "left",
                    "font-size": this.options.tipSize,
                    padding: this.options.tipPadding,
                    "padding-bottom": 0
                }
            }).inject(this.options.targetObject);
        }

        $$("div.rating"+this.options.targetObject.id).each(function(el, i) {
            if (i < Math.round(this.options.rate)) {
                el.setStyle("background-color", "rgb("+el.get("data-colour") +")");
            }
            else {
                el.addClass("bnw"); // in case we ever want to refrence them by class.
            }
        }.bind(this));
    }, // end draw
    bindEvents: function() {
        // we support multiple rating rows on the same page.
        $$("div.rating"+this.options.targetObject.id).each(function(el, i) {

            if (this.options.addEvents)
                el.addEvents({
                    mouseenter: function() {
                        var targetId = el.retrieve("related");
                    	$$("div.rating"+targetId).each(function(plains, i) {
                            plains.setStyle("background-color", (i < el.get("data-index")) ? "rgb("+plains.get("data-colour") +")" : this.options.background);
                        }.bind(this));
                    }.bind(this),
                    mouseleave: function() {
                        var targetId = el.retrieve("related");
                        el.setStyles({
                            "border": this.options.border
                        });
                        $$(".rating"+targetId).each(function(plains, i) {
                            plains.setStyle("background-color", (i < this.options.rate) ? "rgb("+plains.get("data-colour") +")" : this.options.background);
                        }.bind(this));
                    }.bind(this),
                    click: function() {
                        var targetId = el.retrieve("related");
                        $(targetId).set("data-value", el.get("data-index"));
                        // we can have a pre-defined click event that sends selected value to a function
                        // for example. an ajax call to save the rating.
                        if ($type(this.options.clickEvent) == "function")
                            this.options.clickEvent.run({
                                ratingID: targetId,
                                newRating: el.get("data-index").toInt()
                            });

                        // re-draw with selected
                    	this.setOptions({
                    	    targetObject: $(targetId),
                    	    rate: el.get("data-index").toInt(),
                    	    addEvents: false
                    	});

                    	this.draw();
                    }.bind(this)
                }); // end addEvents

        }.bind(this));
    } // end bindEvents
}); // end doRating