<script>
     $(document).ajaxSend(function(event, xhr, settings) {
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        function sameOrigin(url) {
            // url could be relative or scheme relative or absolute
            var host = document.location.host; // host + port
            var protocol = document.location.protocol;
            var sr_origin = '//' + host;
            var origin = protocol + sr_origin;
            // Allow absolute or scheme relative URLs to same origin
            return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
                (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
                // or any other URL that isn't scheme relative or absolute i.e relative.
                !(/^(\/\/|http:|https:).*/.test(url));
        }
        function safeMethod(method) {
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        
        if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
    });
</script>
<script type="text/javascript" src="{{ STATIC_URL }}agon_ratings/js/jquery.raty.js"></script>
<script type="text/javascript">
    $(function () {
        // Assumptions:
        // 1. you have a div with the id of "user_rating" where you want the stars to go
        // 2. you have a container with the class .overall_rating where the new average rating will go
        $("#user_rating").raty({
            score: function() {
                return $(this).attr('data-score');
            },
            click: function(score, evt) {
                var current_rating = 0;
                if (score != null) {
                    current_rating = score;
                }
                console.log("Score", score, "{{ post_url }}");
                $.ajax({
                    url: "{{ post_url }}",
                    type: "POST",
                    data: {
                        "rating": current_rating
                        {% if category %}
                        ,"category": "{{ category }}"
                        {% endif %}
                    },
                    statusCode: {
                        403: function(jqXHR, textStatus, errorThrown) {
                            // Invalid rating was posted or invalid category was sent
                            console.log(errorThrown);
                        },
                        200: function(data, textStatus, jqXHR) {
                            {% if category %}
                                $(".overall_rating.category-{{ category }}").text(data["overall_rating"]);
                            {% else %}
                                $(".overall_rating").text(data["overall_rating"]);
                            {% endif %}
                        }
                    }
                });
            },
            cancel: true,
            path: "{{ STATIC_URL }}agon_ratings/img/"
        });
    });
</script>