jQuery(document).ready(function() {

    $("#qrate").unbind("click");
    $("#qrate").bind("click", function() {

        if ($("div.product-status").is(":visible") && $("div.product-status").html() != "") {
            $("div.product-status").hide();
            return;
        }
        
        var rating = "<span class=\"rating\"><span id=\"numRating\"></span>" +
                "<img class=\"rate\" rel=\"1\" src=\"/content/images/emptystar.gif\" />" +
                "<img class=\"rate\" rel=\"2\" src=\"/content/images/emptystar.gif\" />" +
                "<img class=\"rate\" rel=\"3\" src=\"/content/images/emptystar.gif\" />" +
                "<img class=\"rate\" rel=\"4\" src=\"/content/images/emptystar.gif\" />" +
                "<img class=\"rate\" rel=\"5\" src=\"/content/images/emptystar.gif\" />" +
                "<img id=\"cancelRate\" src=\"/content/images/cross.png\" title=\"Cancel\" alt=\"Cancel\" /></span>";

        $("div.product-status").html(rating).show();

        $("#cancelRate").unbind("click");
        $("#cancelRate").bind("click", function() {
            $("span.rating").remove();
            checkButton.show();
        });
        // What to do on a hover of a rating star.
        $("span.rating img.rate")
            .hover(
                function() {
                    if ($(this).attr("src").indexOf("filled") == -1) {
                        var num = $(this).attr("rel");
                        for (var it = 1; it <= num; it++) {
                            var img = $("span.rating img.rate[rel=\"" + it + "\"]")[0];
                            var newSrc = "/content/images/filledstar.gif";
                            $(img).attr("src", newSrc);
                        }
                        $("#numRating").text("Rating: " + $(this).attr("rel") + "/5");
                    }
                },
                function() {
                    if ($(this).attr("src").indexOf("filled") != -1) {
                        for (var it = 1; it <= 5; it++) {
                            var img = $("span.rating img.rate[rel=\"" + it + "\"]")[0];
                            var oldSrc = "/content/images/emptystar.gif";
                            $(img).attr("src", oldSrc);
                        }
                        $("#numRating").text("");
                    }
                }
            )
        // Now we click on a rating star.
            .unbind("click")
            .click(function() {
                // alert($(this).attr("rel"));
                $.ajax({
                    url: "/Service/RateProduct?userId=" + $("#userId").val() + "&productId=" + $("#productId").val() + "&rating=" + $(this).attr("rel"),
                    type: "POST",
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    success:
                    function(result) {
                        var obj = JSON.parse(result);
                        // $("span.rating").remove();
                        // checkButton.show();

                        $("div.product-status").show();
                        if (obj.error) {
                            $("div.product-status")
                                .text(obj.error)
                                .fadeOut(3000);
                            // .remove();
                        } else {
                            $("div.product-status")
                                .text("Successfully rated.")
                                .fadeOut(3000);
                            // .remove();
                        }
                        /*
                        $(html)
                        .hide()
                        .prependTo(listItem)
                        .slideDown(1000)
                        .fadeTo(3000, 1)
                        .slideUp(1000)
                        .fadeOut(1000);
                        */
                    }
                });
            });
    });
});