var select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  
  // SHAPES
  theCircle = select("#theCircle"),
  theLine = select("#theLine"),
  theFlash = select("#theFlash"),
  theZig = select("#theZig"),
  theWave = select("#theWave"),
  theStripes = selectAll("#theStripes > line"),    

  theSquares = select("#theSquares"),
  theSquare1 = select("#theSquare1"),
  theSquare2 = select("#theSquare2"),
  theSquare3 = select("#theSquare3"),
  theSquare4 = select("#theSquare4"),

  theBalls = select("#theBalls"),
  theBall1 = select("#theBall1"),
  theBall2 = select("#theBall2"),
  theBall3 = select("#theBall3"),

  theConfettis = selectAll("#theConfettis rect"),  
  theConfetti1 = select("#theConfetti1"),
  theConfetti2 = select("#theConfetti2"),
  theConfetti3 = select("#theConfetti3"),
  theConfetti4 = select("#theConfetti4"),
  theConfetti5 = select("#theConfetti5"),
  theConfetti6 = select("#theConfetti6"),
  theConfetti7 = select("#theConfetti7"),
  theConfetti8 = select("#theConfetti8"),

  // <AUDIO> TAGS
  sample1 = select("#sample1"),
  sample2 = select("#sample2"),
  sample3 = select("#sample3"),
  sample4 = select("#sample4"),
  sample5 = select("#sample5"),
  sample6 = select("#sample6"),
  sample7 = select("#sample7"),
  sample8 = select("#sample8"),
  sample9 = select("#sample9"),

  // THE TIMELINES
  tlA = new TimelineMax(),
  tlB = new TimelineMax(),
  tlC = new TimelineMax(),
  tlD = new TimelineMax(),
  tlE = new TimelineMax(),
  tlF = new TimelineMax(),
  tlG = new TimelineMax(),
  tlH = new TimelineMax(),
  tlI = new TimelineMax()



// INIT SHAPE STATES
TweenMax.set(theLine, {
  drawSVG: '0% 0%'
})
TweenMax.set(theFlash, {
  opacity: 0
})
TweenMax.set(theZig, {
  drawSVG: '0% 0%'
})
TweenMax.set(theSquares, {
  opacity:0
})
TweenMax.set(theStripes, {
  opacity:0
})
TweenMax.set(theWave, {
  attr: {
    r: "100%"
  }
})
TweenMax.set(theBalls, {
  opacity: 0
})
TweenMax.set(theCircle, {
  attr: {
    r: "30%"
  }
})
TweenMax.set(theConfettis, {
  rotation:0,
  x:0,
  y:0
})


// GET RANDOM INTEGER
function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}


// THE ANIMATIONS
function playFlash() {
  var opa = .3;
  tlC.progress(1);
  tlC.set(theFlash, {
      opacity: 0
    })
    .to(theFlash, .05, {
      repeat:20,
      opacity: opa
    })
}

function playSquare() {
  var dist=rand(150,180);
  var angle=(rand(0,1) ? -90 : 90);
  tlF.progress(1);
  tlF.set(theSquare1, {
      y: "-="+dist
    })
    .set(theSquare2, {
      x: "+="+dist
    })
    .set(theSquare3, {
      y: "+="+dist
    })
    .set(theSquare4, {
      x: "-="+dist
    })
    .set(theSquares, {
      opacity: 1,
      rotation: 0,
      y: "-=5"
    })
    .to(theSquares, .7, {
      opacity: 1,
      rotation: angle,
      transformOrigin: "center center"
    })
    .to(theSquare1, .6, {
      y: "+="+dist,
      ease: Power2.easeInOut
    }, "-=.6")
    .to(theSquare2, .6, {
      x: "-="+dist,
      ease: Power2.easeInOut
    }, "-=.6")
    .to(theSquare3, .6, {
      y: "-="+dist,
      ease: Power2.easeInOut
    }, "-=.6")
    .to(theSquare4, .6, {
      x: "+="+dist,
      ease: Power2.easeInOut
    }, "-=.6")
    .to(theSquares, .3, {
      opacity: 0,
      y: "+=5"
    }, "+=.3")
}

function playCircle() {
  var radius=rand(25,35);
  tlA.progress(1);
  tlA.set(theCircle, {
      attr: {
        r: "0%"
      },
      opacity: 1
    })
    .fromTo(theCircle, .3, {
      attr: {
        r: "10%"
      }
    }, {
      attr: {
        r: radius+"%"
      },
      ease: Elastic.easeOut.config(1.5, .9)
    })
    .to(theCircle, .1, {
      attr: {
        r: "0%"
      },
      opacity: 0,
      ease: Linear.easeNone
    })
}

function playWave() {
  var angleZ=rand(-60,60);
  var angleX=rand(-60,60);
  tlG.progress(1);
  tlG.set(theWave, {
      attr: {
        r: "150%"
      },
      transform:"rotateZ("+angleZ+"deg) rotateX("+angleX+"deg)"
    })
    .to(theWave, .5, {
      attr: {
        r: "0%"
      },
      transform:"rotateZ(0deg) rotateX(0deg)",
      ease: Circ.easeOut
    })
}

function playWobble() {
  var b1=rand(44,49);
  var b2=rand(46,51);
  var b3=rand(45,50);
  tlI.progress(1);
  tlI.set(theBall1, {
      rotation: 0
    })
    .set(theBall2, {
      rotation: 2
    })
    .set(theBall3, {
      rotation: 5
    })
    .set(theBalls, {
      opacity: .4
    })
    .to(theBall1, 1.6, {
      rotation: -360,
      transformOrigin: b1+"% "+b2+"%",
      ease: Linear.easeNone
    })
    .to(theBall2, 1.6, {
      rotation: 360,
      transformOrigin: b2+"% "+b3+"%",
      ease: Linear.easeNone
    }, "-=1.5")
    .to(theBall3, 1.6, {
      rotation: 360,
      transformOrigin: b2+"% "+b1+"%",
      ease: Linear.easeNone
    }, "-=1.5")
    .to(theBalls, .2, {
      opacity: 0
    }, "-=.3")
}

function playLine() {
  var rotate=Math.random()*360;
  var h=document.documentElement.clientHeight;
  var w=document.documentElement.clientWidth;
  tlB.progress(1);
  tlB.set(theLine, {
      drawSVG: "0% 0%",
      rotation: rotate,
      transformOrigin: "center center",
      attr: {
        x1: 0,
        y1: 0,
        x2: w,
        y2: h
      }
    })
    .to(theLine, .2, {
      drawSVG: '0% 100%',
      ease: Linear.easeNone
    })
    .to(theLine, .5, {
      drawSVG: '100% 100%',
      ease: Linear.easeNone
    })
}


function playConfettis() {
  var h=document.documentElement.clientHeight-100;
  var w=document.documentElement.clientWidth/2-80;
  var minH=100;
  tlE.progress(1);
  tlE.set(theConfettis, {
    rotation:0,
    rotationY:0,
    x:0,
    y:0,
    opacity:1,
    transformOrigin: "center center",
    scaleX:0.6,
    scaleY:0.6
  })
  .staggerTo(theConfettis, .3, {
    rotation: function() { return rand(-360,360); },
    x: function(){ return rand(-w,w); },
    y: function(){return rand(-minH,-h); },
    rotationY:360,
    scaleX:1,
    scaleY:1
  }, 0.05)
  // .to(theConfetti2, .4, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti3, .4, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti4, .2, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti5, .3, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti6, .4, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti7, .4, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti8, .3, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti9, .2, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti10, .4, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti11, .3, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti12, .3, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti13, .4, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  // .to(theConfetti14, .2, {
  //   rotation:rand(-360,360),
  //   x:rand(-w,w),
  //   y:rand(-minH,-h),
  //   rotationY:360,
  //   scaleX:1,
  //   scaleY:1
  // }, "-=.3")
  .to(theConfettis, .1, {
    opacity:0
  }, "+=.5")
}


function playStripes() {
  var start=100*rand(0,1);
  var end=100-start;
  tlH.progress(1);
  tlH.set(theStripes, {
      drawSVG: start+"% "+start+"%",
      opacity: 1
    })
    .to(theStripes, .5, {
      drawSVG: start+"% "+end+"%",
      ease: Power3.easeOut
    })
    .to(theStripes, .3, {
      drawSVG: end+"% "+end+"%",
      opacity: 0,
      ease: Power3.easeOut
    }, "+=.3")
}

function playZig() {
  var dist = rand(30,80);
  tlD.progress(1);
  tlD.set(theZig, {
      drawSVG: "0% 0%"
    })
    .to(theZig, .6, {
      drawSVG: "0% "+dist+"%",
      ease: Sine.easeInOut
    })
    .to(theZig, .5, {
      drawSVG: "100% 100%",
      ease: Sine.easeOut
    })
}


// KEYBOARD CONTROL
window.addEventListener("keydown", checkKeyPressed, true);
function checkKeyPressed(e) {
  if (e.keyCode == "65") { // A
    playCircle();
    sample1.currentTime=0;
    sample1.play();
  }
  if (e.keyCode == "90") { // Z
    playLine();
    sample2.currentTime=0;
    sample2.play();
  }
  if (e.keyCode == "69") { // E
    playWave();
    sample3.currentTime=0;
    sample3.play();
  }
  if (e.keyCode == "81") { // Q
    playFlash();
    sample4.currentTime=0;
    sample4.play();
  }
  if (e.keyCode == "83") { // S
    playZig();
    sample5.currentTime=0;
    sample5.play();
  }
  if (e.keyCode == "68") { // D
    playStripes();
    sample6.currentTime=0;
    sample6.play();
  }
  if (e.keyCode == "87") { // W
    playWobble();
    sample7.currentTime=0;
    sample7.play();
  }
  if (e.keyCode == "88") { // X
    playSquare();
    sample8.currentTime=0;
    sample8.play();
  }
  if (e.keyCode == "67") { // C
    playConfettis();
    sample9.currentTime=0;
    sample9.play();
  }  
}


// TOUCH CONTROL
$('#pad1').on('touchstart', function(e){
  playCircle();
  sample1.currentTime=0;
  sample1.play();
});
$('#pad2').on('touchstart', function(e){
  playLine();
  sample2.currentTime=0;
  sample2.play();
});
$('#pad3').on('touchstart', function(e){
  playWave();
  sample3.currentTime=0;
  sample3.play();
});
$('#pad4').on('touchstart', function(e){
  playFlash();
  sample4.currentTime=0;
  sample4.play();
});
$('#pad5').on('touchstart', function(e){
  playZig();
  sample5.currentTime=0;
  sample5.play();
});
$('#pad6').on('touchstart', function(e){
  playStripes();
  sample6.currentTime=0;
  sample6.play();
});
$('#pad7').on('touchstart', function(e){
  playWobble();
  sample7.currentTime=0;
  sample7.play();
});
$('#pad8').on('touchstart', function(e){
  playSquare();
  sample8.currentTime=0;
  sample8.play();
});
$('#pad9').on('touchstart', function(e){
  playConfettis();
  sample9.currentTime=0;
  sample9.play();
});


// TOUCH CONTROL FEEDBACK
$('.touch-btn').on('touchstart', function(e){
	$(this).addClass('tapped');
});
$('.touch-btn').on('touchend', function(e){
	$(this).removeClass('tapped');
});


// HIDE INSTRUCTIONS
$('.close').on('click', function(){
  $('#message').hide();
})


// SWAP THEME
$('#swap').on('click', function(){
  $('html').toggleClass('theme--light').toggleClass('theme--dark');
  $(this).toggleClass('light');
})