<section id="spillBG">
        <section id="bokser">
            <div id="ganesha">
                <div class="circle"></div>
              <%= audio_tag "ganesha.m4a", id: 'ganeshaLyd'%>
            </div>
            <div id="vibhuti">
                <div class="circle"></div>
              <%= audio_tag "vibhuti.m4a", id: 'vibhutiLyd'%>
            </div>
            <div id="rokelse">
                <div class="circle"></div>
              <%= audio_tag "rokelse.m4a", id: 'rokelseLyd'%>
            </div>
            <div id="blomster">
                <div class="circle"></div>
              <%= audio_tag "blomster.m4a", id: 'blomsterLyd'%>
            </div>
            <div id="offer">
                <div class="circle"></div>
              <%= audio_tag "offer.m4a", id: 'offerLyd'%>
            </div>
            <div id="info">
                <p>Test deg selv</p>
            </div>
            <div id="draggable">
                <p class="navn ganesha" data-navn="ganesha">Ganesha</p>
                <p class="navn vibhuti" data-navn="vibhuti">Vibhuti</p>
                <p class="navn rokelse" data-navn="rokelse">Røkelse</p>
                <p class="navn blomster" data-navn="blomster">Blomster</p>
                <p class="navn offer" data-navn="offer">Offer</p>
            </div>
        </section>
    </section>
    <script>
$(function() {
    var antRiktige = 0;
    var antFeil = 0;



    function stilSettStart() {
        $(".ganesha").css({
            "top": 135 + "px",
            "left": 420 + "px",
            "positon":"absolute"
        });
        $(".vibhuti").css({
            "top": 320 + "px",
            "left": 260 + "px"
        });
        $(".rokelse").css({
            "top": 370 + "px",
            "left": 590 + "px"
        });
        $(".blomster").css({
            "top": 207 + "px",
            "left": 420 + "px"
        });
        $(".offer").css({
            "top": 335 + "px",
            "left": 420 + "px"
        });
        $(".navn").css("position", "absolute");

    }

    function settEvents() {
        //LYDEVENT
        $(".circle").on("click", function() {
            var parentsId = $(this).parent().attr("id");
            $("." + parentsId).toggle();
            if ($("." + parentsId).is(":visible")) {
                var audio = $("#" + parentsId + "Lyd")[0];
                audio.play();
            }

        });


        $("#info p").on("click", function() {

            if(antRiktige == 5) {
                stilSettStart();
                $("#draggable").css("position","static");
                $("#draggable p").css({
                    "background-color":"white",
                    "display":"none"
                });

                antRiktige  = 0;
                antFeil = 0;

                $("#draggable p").draggable('enable');
                $("#draggable p").draggable('option', 'revert', true);
                $("#info p").html("Test deg selv");
                $(".circle").css("background-color","transparent");



                 $(".circle").on("click", function() {
                    var parentsId = $(this).parent().attr("id");
                    $("." + parentsId).toggle();
                    if ($("." + parentsId).is(":visible")) {
                    var audio = $("#" + parentsId + "Lyd")[0];
                    audio.play();
            }

        });
            } else {

                $(".circle").off();

                $("#info p").html("");
                $("#info").css("background-color","transparent");

                $(".offer,.blomster,.rokelse,.vibhuti,.ganesha").css({
                    "top": 0,
                    "left": 0,
                    "right": 0,
                    "bottom": 0,
                    "display": "inline"
                });
                $(".navn").css("position", "relative");

                $("#draggable").css({
                    "position": "relative",
                    "top": 460 + "px",
                    "left": 20 + "px"
                });
            }

        });




        //DRAGGABLE EVENTS
        $("#draggable p").draggable({
            revert: true,
            snap: "#drop",
            snapMode: "inner",
            start: function(e, ui) {
                //ui.helper
                ui.helper.fadeTo(500, 1);

            },
            stop: function(e, ui) {
                ui.helper.fadeTo(500, 1);
            }
        });

        $("#bokser .circle").droppable({

            drop: function(e, ui) {

                var sirkelDiv = $(this).parent().attr("id");
                var svarDiv = ui.draggable.attr("data-navn");

                if (sirkelDiv === svarDiv) {
                    $("." + svarDiv).animate({
                        "background-color": "green"
                    }, 500);


                    ui.draggable.draggable("disable");
                    ui.draggable.draggable("option", "revert", "false");
                    antRiktige++;


                } else {
                    $(this).animate({
                        "background-color": "red"
                    }, 500);
                    antFeil++;
                }
                checkWin();
            }
        });


    }

    function checkWin() {
        if(antRiktige === 5) {
            if(antFeil <= 1) {
                alert("KJEMPEBRA, Du fikk " + antFeil + " feil.");
            } else if(antFeil > 3) {
                alert("Du må øve litt mer, Du fikk " + antFeil + " feil.");
            } else {
                alert("Bra!, Du fikk " + antFeil + " feil.");
            }
            $("#info").css("background-color","yellow");
            $("#info p").html("Prøv på nytt");
        }
    }

    var init = function() {
        stilSettStart();
        settEvents();
    }();
});



    </script>