var santa = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='80' width='80'%3E%3Ccircle cx='50' cy='57' r='31' fill='red' stroke='darkred' stroke-width='3'/%3E%3Cpath d='M 80 60 H 20 A 1 1 0 0 0 20 66 H 80 A 1 1 0 0 0 80 60Z' fill='%23222' stroke='darkred' stroke-width='2.5' /%3E%3Cpath d='M 65 21 A 1 1 0 0 0 26 26' fill='red' stroke='darkred' stroke-width='2.5' /%3E%3Cpath d='M 35 23 Q 28 34 33 44 C 40 57 61 57 67 44 Q 72 34 65 23' fill='%23fff' stroke='%23ddd' stroke-width='2.5' /%3E%3Cpath d='M 40 38 C 41 46 59 46 60 38' fill='%23222' /%3E%3Cpath d='M 40 33 A 1 1 0 0 0 46 33 A 1 1 0 0 0 40 33 M 60 33 A 1 1 0 0 0 54 33 A 1 1 0 0 0 60 33' fill='%23222' /%3E%3Cpath d='M 65 19 H 35 A 1 1 0 0 0 35 27 H 65 A 1 1 0 0 0 65 19Z' fill='%23fff' stroke='darkred' stroke-width='2.5' /%3E%3Ccircle cx='26' cy='26' r='5' fill='%23fff' stroke='darkred' stroke-width='2.5'/%3E%3Ccircle cx='80' cy='46' r='8' fill='%23c62828' stroke='darkred' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='46' r='8' fill='%23c62828' stroke='darkred' stroke-width='2.5'/%3E%3Ccircle cx='66' cy='85' r='10' fill='%23222' stroke='darkred' stroke-width='2.5'/%3E%3Ccircle cx='34' cy='85' r='10' fill='%23222' stroke='darkred' stroke-width='2.5'/%3E%3C/svg%3E";

let candyCane = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='80' width='80'%3E%3Cpath d='M 10 33 A 1 1 0 0 1 45 25 L 58 90' stroke='darkred' stroke-width='18' stroke-linecap='round' fill='none'/%3E%3Cpath d='M 10 33 A 1 1 0 0 1 45 25 L 58 90' stroke='%23fff' stroke-width='16' stroke-linecap='round' fill='none'/%3E%3Cpath d='M 10 33 A 1 1 0 0 1 45 25 L 58 90' stroke='%23f00' stroke-width='16' stroke-dasharray='9' fill='none'/%3E%3Cpath d='M 90 33 A 1 1 0 0 0 55 25 L 42 90' stroke='darkred' stroke-width='18' stroke-linecap='round' fill='none'/%3E%3Cpath d='M 90 33 A 1 1 0 0 0 55 25 L 42 90' stroke='%23fff' stroke-width='16' stroke-linecap='round' fill='none'/%3E%3Cpath d='M 90 33 A 1 1 0 0 0 55 25 L 42 90' stroke='%23f00' stroke-width='16' stroke-dasharray='9' fill='none'/%3E%3C/svg%3E";
let shape = santa;
let shape2 = candyCane;

let w = window.innerWidth;
let h = window.innerHeight;
let total = Math.floor(w / 20);
//var total = 11;


//Random Number generator
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body,
  MouseConstraint = Matter.MouseConstraint,
  Mouse = Matter.Mouse;

var engine = Engine.create();

var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: w,
    height: h,
    background: 'linear-gradient(#01579B,#01579B,#01579B,#B3E5FC 97% ,#E1F5FE 97%)',
    wireframes: false
  }
});

//Extra thick so the frame rate doesn't allow it to escape
let topWall = Bodies.rectangle(w / 2, -200, w, 400, { isStatic: true });
let leftWall = Bodies.rectangle(-200, (h*2-(h*2)), 400, h*4, { isStatic: true });
let rightWall = Bodies.rectangle(w + 200, (h*2-(h*2)), 400, h*4, { isStatic: true });
let bottomWall = Bodies.rectangle(w / 2, h+200, w, 400, { isStatic: true });
let midWall = Bodies.rectangle(w/2, (h*2-(h*2)), w/6, h*4, { isStatic: true, render: {
    fillStyle: "red",strokeStyle: 'rgb(0,200,23)',lineWidth: 6}});
let team1 = [];
let team2 = [];
for (let i = 0; i < total; ++i) {
  team1[i] = Bodies.polygon(
    //start in the middle and randomly offset 20 in all directions
    (0+w/4)+ random(-20,20),
    h / 2 + random(-20,20),
    5,
    30,
    {
      friction:0.06,
      frictionAir:0.03,
      restitution:0.9,
      render: {
        sprite: {
          texture: shape,
          xScale: 1,
          yScale: 1
        }
      }
    }
  );
  
  team2[i] = Bodies.polygon(
    //start in the middle and randomly offset 20 in all directions
    (w-w/4) + random(-20, 20),
    h / 2 + random(-20, 20),
    5,
    30,
    {
      friction:0.06,
      frictionAir:0.03,
      restitution:0.9,
      render: {
        sprite: {
          texture: shape2,
          xScale: 1,
          yScale: 1
        }
      }
    }
  );
}

//Adds the walls to the world
World.add(engine.world, [topWall, leftWall, rightWall, bottomWall, midWall]);

//function ballMe(){
//Adds all the balls to the world
for (var i = 0; i < total; ++i) {
  World.add(engine.world, [team1[i],team2[i]]);
}
//}

// add mouse control
    var mouse = Mouse.create(render.canvas),
        mouseConstraint = MouseConstraint.create(engine, {
            mouse: mouse,
            constraint: {
                stiffness: 0.2,
                render: {
                    visible: false
                }
            }
        });

    World.add(engine.world, mouseConstraint);

Engine.run(engine);

Render.run(render);

let currentYear = new Date().getFullYear();
//Countdown
// Set the date we're counting down to
let countDownDate = new Date("December 25, " + currentYear + " 00:00:00").getTime();

let inc = 1;

// Update the count down every 1 second
let x = setInterval(function() {

  // Get todays date and time
  let now = new Date().getTime();

  // Find the distance between now an the count down date
  let timeLeft = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  let days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  let hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

  //find a way to work the days left into the amount of wiggle
  //positive multiplier spins right, negative spins left
let mul = 1;

function jitterBug(){
  for (let i = 0; i < total; ++i) {
    let rr = random(1, 2);
  if (rr == 1) {
    mul = -1;
  } else {
    mul = 1;
  }
    Body.setAngularVelocity(team1[i], Math.PI / random(mul * 2, mul * 9));
    Body.setAngularVelocity(team2[i], Math.PI / random(mul * 2, mul * 9));
    Body.setVelocity(team1[i], { x: random(1, 2), y: random(-1, 1) });
    Body.setVelocity(team2[i], { x: (random(-2, -1)), y: (random(-1, 1)) });
  }
}

$( "canvas" ).on("click", jitterBug);
$( "#demo" ).on("click", jitterBug);
  
  //increments a variable and runs the jitterBug function every --days left til X-mas-- seconds
  inc++;
  if(inc%days===0){
    jitterBug();
  }
  
  // Display the result in the element with id="demo"
  document.getElementById("timer").innerHTML = days + "<br/><span class='smaller'>days</span><br/>" + hours + "<br/><span class='smaller'>hrs</span><br/>"
  + minutes + "<br/><span class='smaller'>min</span><br/>" + seconds + "<br/><span class='smaller'>sec</span>";
  
  // If the countdown is finished, do stuff 
  if (timeLeft < 0) {
    
    document.getElementById("timer").innerHTML = "<span class='goCrazy'>Merry<br>Christmas!!!</span>";
    $("#demo").addClass("goCrazy");
    days = 0;
    jitterBug();
  }
}, 1000);