$(function() {
    $(".avg").children().not(":input").hide();
    $(".rat").children().not("select, #messages").hide();

    // Create stars for: Average rating
    $(".avg").stars();

    // Create stars for: Rate this
    $(".rat").stars({
        inputType: "select",
        cancelShow: false,
        captionEl: $("#caption"),
        callback: function(ui, type, value) {
            // Disable Stars while AJAX connection is active
            ui.disable();

            // Display message to the user at the begining of request
            $("#messages").text("Saving...").stop().css("opacity", 1).fadeIn(30);

                var f = $(".rat");
                var SerializedForm = f.serialize();
                $.post("/Dominican_Gallery/RateMe/", SerializedForm, function(data) {
                    $(".avg").stars("select", Math.round(data.Rating));
                    $(".all_votes").text(data.Votes);
                    $("#all_avg").text(data.Rating);
                    $("#messages").text("Rating saved (" + value + "). Thanks!").stop().css("opacity", 1).fadeIn(30);
                    setTimeout(function() {
                        $("#messages").fadeOut(1000, function() { ui.enable() })
                    }, 2000);
                }, "json");
        }
    });

    // Since the <option value="3"> was selected by default, we must remove selection from Stars.
    $(".rat").stars("selectID", -1);

    // Create element to use for confirmation messages
    $('<div id="messages"/>').appendTo(".rat");
});