require(
   // Use this raphael.lonce library to "fix" some annoying things about Raphel paper and graphical elements:
    //     a) paper.put(relement) - to put an Element created by paper back on a paper after it has been removed
    //     b) call element.addEventListener(...) instead of element.node.addEventListner(...)
    ["../jslibs/raphael.lonce"],  // include a custom-built library

    function (tutSndFactory, raphHelper) {
        alert("Click the green disk as many times as you can in 10 seconds.")

        // function myFunction() {
        // var txt;
        // var person = prompt("Please enter your name:", "Harry Potter");
        // if (person == null || person == "") {
        // txt = "User cancelled the prompt.";
        // } else {
        // txt = "Hello " + person + "! How are you today?";
        // }
        // // document.getElementById("demo").innerHTML = txt;
        // //
        // };

        // myFunction();

        var level=document.getElementById("levelSlider");
        level.addEventListener("input", function (ev) {
           if (level.value == 1) {

           }

        });



        console.log("Yo, I am alive!");
        var background = document.getElementById("background");

        // Grab the div where we will put our Raphael paper
        var centerDiv = document.getElementById("centerDiv");

        // Create the Raphael paper that we will use for drawing and creating graphical objects
        var paper = new Raphael(centerDiv);

        // put the width and heigth of the canvas into variables for our own convenience
        var pWidth = paper.width;
        var pHeight = paper.height;
        console.log("pWidth is " + pWidth + ", and pHeight is " + pHeight);

        // Just create a nice black background
        var bgRect = paper.rect(0,0,pWidth, pHeight);
        // bgRect.attr({"fill": "black"});

        // var p = Raphael("paper",800,800);

        // var img = p.image("resources/backgroundimage.jpg", 10,10,300,300).attr({"clip-rect":"20,40,300,300"});

        // A dot for us to play with
        var dot = paper.circle(pWidth/2, pHeight/2, 20);
        dot.attr({"fill": "green"});


        //-------------------

        //HTML5 audio element


        //-------------------

        // Add some properties to dot just to keep track of it's "state"
        dot.xpos=pWidth/2;
        dot.ypos=pHeight/2;
        dot.xrate=5;
        dot.yrate=5;

        // create an array to hold 4 sounds for each wall.
        var soundTop = new Audio("resources/446100__justinvoke__bounce.wav");
        var soundBottom = new Audio("resources/383240__josepharaoh99__bounce.wav");
        var soundLeft = new Audio("resources/456563__bumpelsnake__bounce1.wav");
        var soundRight = new Audio("resources/361230__someguy22__8-bit-bounce.wav");

        // our drawing routine, will use as a callback for the interval timer
        var draw = function(){

            // Update the position where we want our dot to be
            dot.xpos += dot.xrate;
            dot.ypos += dot.yrate;

            // Now actually move the dot using our 'state' variables
            dot.attr({'cx': dot.xpos, 'cy': dot.ypos});

            //---------------------------------------------
            // Set sound parameters based on the position of the moving dots

            // When dots hit any of the 4 walls, reverse its direction
            if (dot.xpos > pWidth) {
                dot.xrate = -dot.xrate;
                soundTop.play();
            }
            if (dot.ypos > pHeight) {
                dot.yrate = - dot.yrate;
                soundBottom.play();
            };
            if (dot.xpos < 0) {
                dot.xrate = -dot.xrate;
                soundLeft.play();

            }
            if (dot.ypos < 0) {
                dot.yrate = - dot.yrate;
                soundRight.play();
            };

            if (startTime == 10000) { // after 10 seconds have passed, stop the game and call function endGame
                endGame();
            }
        };



        // call draw() periodically
        // Start the timer with a button (instead of as program loads) so that sound models have time to load before we try play or set their parameters in the draw() function.
        var toggle="off";
        // var timer;
        document.getElementById("startButtonID").addEventListener('click', function(ev){
            if (toggle=="off"){
                setInterval(draw, 60);

                toggle="on";

                setTimeout(function(){ // when i press button stop counting the time
                    if(toggle=="on")
                        alert("Your count = " + numClicks);
                        endGame();
                }, 10000);

            } else {
                toggle="off"
                endGame();

            }
        });

        var startTime;
        var numClicks = 0;
        var gamePlay;

        var welcomeSound = new Audio("resources/336472__djfroyd__groovy-techno-loop.wav");

        var toggleButton = document.getElementById("startButtonID")

        toggleButton.addEventListener("click", function playSound() {
            welcomeSound.play();
            numClicks++;

            if (numClicks % 2 == 1) { // if odd number click, want to start ball move and start music
                soundTop.play();
                startTime = new Date();

                numClicks = 0;
            };

        });


        // function endGame ()
        //     if (numClicks % 2 == 0) { // if even number click, want to restart ball to center and pause music
        //         dot.attr({'cx': dot.xpos, 'cy': dot.ypos});
        //     }

        // create a sound loop
        welcomeSound.loop=true

        dot.addEventListener("click", function (){
            soundTop.play();
            numClicks++;
        });

        function endGame(){ // move dot back to the center
            clearInterval(timer);
            welcomeSound.pause();
            dot.attr({
                "cx": pWidth/2,
                "cy": pHeight/2

            });
        };
});