/*
 ***
 * Otherness sampler
 * 
 ***
 * Hacked together by Chris Darby - jandaltech dot com.
 *
 * Distributed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
 *
 ***
 * Samples and artwork copyright Grayson Gilmour 2017.
 * For non-commercial use only.
 *
 ***
 */

var keyData;
var loop1;
var loop2;
var loop3;
var loop4;
var loop5;
var loop6;
var loop7;
var loop8;
var loop9;
var loop0;

var loop1on = false;
var loop2on = false;
var loop3on = false;
var loop4on = false;
var loop5on = false;
var loop6on = false;
var loop7on = false;
var loop8on = false;
var loop9on = false;
var loop0on = false;

var hwQ = new Howl({ urls: ['sounds/hundred_waters/hits/BASS_1_V2.mp3'] });
var hwW = new Howl({ urls: ['sounds/hundred_waters/hits/DRUM_1_V2.mp3'] });
var hwE = new Howl({ urls: ['sounds/hundred_waters/hits/DRUM_4.mp3'] });
var hwR = new Howl({ urls: ['sounds/hundred_waters/hits/DRUM_7.mp3'] });
var hwT = new Howl({ urls: ['sounds/hundred_waters/hits/FXVX_1.mp3'] });
var hwY = new Howl({ urls: ['sounds/hundred_waters/hits/FXVX_2_V2.mp3'] });
var hwU = new Howl({ urls: ['sounds/hundred_waters/hits/GATS_1_V2.mp3'] });
var hwI = new Howl({ urls: ['sounds/hundred_waters/hits/GATS_2_V2.mp3'] });
var hwO = new Howl({ urls: ['sounds/hundred_waters/hits/GGVX_1.mp3'] });
var hwP = new Howl({ urls: ['sounds/hundred_waters/hits/GGVX_2.mp3'] });
var hwA = new Howl({ urls: ['sounds/hundred_waters/hits/GGVX_3.mp3'] });
var hwS = new Howl({ urls: ['sounds/hundred_waters/hits/GPAD_1_V2.mp3'] });
var hwD = new Howl({ urls: ['sounds/hundred_waters/hits/GPAD_2_V2.mp3'] });
var hwF = new Howl({ urls: ['sounds/hundred_waters/hits/GTXT_1.mp3'] });
var hwG = new Howl({ urls: ['sounds/hundred_waters/hits/GTXT_2_V2.mp3'] });
var hwH = new Howl({ urls: ['sounds/hundred_waters/hits/GTXT_3_V2.mp3'] });
var hwJ = new Howl({ urls: ['sounds/hundred_waters/hits/RHOD_1_V2.mp3'] });
var hwK = new Howl({ urls: ['sounds/hundred_waters/hits/STRG_3_V2.mp3'] });
var hwL = new Howl({ urls: ['sounds/hundred_waters/hits/STRG_4.1_V2.mp3'] });
var hwZ = new Howl({ urls: ['sounds/hundred_waters/hits/STRG_4.2_V2.mp3'] });
var hwX = new Howl({ urls: ['sounds/hundred_waters/hits/STRG_6_V2.mp3'] });
var hwC = new Howl({ urls: ['sounds/hundred_waters/hits/STRG_9_V2.mp3'] });
var hwV = new Howl({ urls: ['sounds/hundred_waters/hits/TEMP_1.mp3'] });
var hwB = new Howl({ urls: ['sounds/hundred_waters/hits/TEMP_3_V2.mp3'] });
var hwN = new Howl({ urls: ['sounds/hundred_waters/hits/TEMP_4_V2.mp3'] });
var hwM = new Howl({ urls: ['sounds/hundred_waters/hits/TEMP_8.mp3'] });

var hw1 = new Howl({
  urls: ['sounds/hundred_waters/loops/DRUM_SAME.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var hw2 = new Howl({
  urls: ['sounds/hundred_waters/loops/GATS_FIX.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var hw3 = new Howl({
  urls: ['sounds/hundred_waters/loops/GATS_NEW.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var hw4 = new Howl({
  urls: ['sounds/hundred_waters/loops/GGVX_NEW.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var hw5 = new Howl({
  urls: ['sounds/hundred_waters/loops/GPAD_SAME.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var hw6 = new Howl({
  urls: ['sounds/hundred_waters/loops/HBVX_FIX.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var hw7 = new Howl({
  urls: ['sounds/hundred_waters/loops/PERC_FIX.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var hw8 = new Howl({
  urls: ['sounds/hundred_waters/loops/STRG_FIX.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var hw9 = new Howl({
  urls: ['sounds/hundred_waters/loops/TEMP_FIX.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var hw0 = new Howl({
  urls: ['sounds/hundred_waters/loops/TEMP_FIX2.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});

var bbQ = new Howl({ urls: ['sounds/blow_back/hits/BLO_ARP1_HIT.wav'] });
var bbW = new Howl({ urls: ['sounds/blow_back/hits/BLO_ARP2_HIT.wav'] });
var bbE = new Howl({ urls: ['sounds/blow_back/hits/BLO_BV1_HIT.wav'] });
var bbR = new Howl({ urls: ['sounds/blow_back/hits/BLO_BV2_HIT.wav'] });
var bbT = new Howl({ urls: ['sounds/blow_back/hits/BLO_BV3_HIT.wav'] });
var bbY = new Howl({ urls: ['sounds/blow_back/hits/BLO_BV4_HIT.wav'] });
var bbU = new Howl({ urls: ['sounds/blow_back/hits/BLO_BV5_HIT.wav'] });
var bbI = new Howl({ urls: ['sounds/blow_back/hits/BLO_BV6_HIT.wav'] });
var bbO = new Howl({ urls: ['sounds/blow_back/hits/BLO_BV7_HIT.wav'] });
var bbP = new Howl({ urls: ['sounds/blow_back/hits/BLO_BV8_HIT.wav'] });
var bbA = new Howl({ urls: ['sounds/blow_back/hits/BLO_DICE_HIT.wav'] });
var bbS = new Howl({ urls: ['sounds/blow_back/hits/BLO_GAT1_HIT.wav'] });
var bbD = new Howl({ urls: ['sounds/blow_back/hits/BLO_GAT2_HIT.wav'] });
var bbF = new Howl({ urls: ['sounds/blow_back/hits/BLO_KAK_HIT.wav'] });
var bbG = new Howl({ urls: ['sounds/blow_back/hits/BLO_KIKREV_HIT.wav'] });
var bbH = new Howl({ urls: ['sounds/blow_back/hits/BLO_KIK_HIT.wav'] });
var bbJ = new Howl({ urls: ['sounds/blow_back/hits/BLO_SLICE_HIT.wav'] });
var bbK = new Howl({ urls: ['sounds/blow_back/hits/BLO_SQ1_HIT.wav'] });
var bbL = new Howl({ urls: ['sounds/blow_back/hits/BLO_SQ2_HIT.wav'] });
var bbZ = new Howl({ urls: ['sounds/blow_back/hits/BLO_SQ3_HIT.wav'] });
var bbX = new Howl({ urls: ['sounds/blow_back/hits/BLO_SQ4_HIT.wav'] });
var bbC = new Howl({ urls: ['sounds/blow_back/hits/BLO_SQ5_HIT.wav'] });
var bbV = new Howl({ urls: ['sounds/blow_back/hits/BLO_VX1_HIT.wav'] });
var bbB = new Howl({ urls: ['sounds/blow_back/hits/BLO_VX2_HIT.wav'] });
var bbN = new Howl({ urls: ['sounds/blow_back/hits/BLO_VX3_HIT.wav'] });
var bbM = new Howl({ urls: ['sounds/blow_back/hits/BLO_XYLO_HIT.wav'] });

var bb1 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_BASS_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var bb2 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_CRAK_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var bb3 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_DRUM_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var bb4 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_GAT_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var bb5 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_KICK_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var bb6 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_SLICE_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var bb7 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_SWELL_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var bb8 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_SWISH_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var bb9 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_SYNTH_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var bb0 = new Howl({
  urls: ['sounds/blow_back/loops/BLO_TAMB_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});

var onQ = new Howl({ urls: ['sounds/otherness/hits/OTH_BASS_HIT.wav'] });
var onW = new Howl({ urls: ['sounds/otherness/hits/OTH_BLIP_HIT.wav'] });
var onE = new Howl({ urls: ['sounds/otherness/hits/OTH_BV_HIT.wav'] });
var onR = new Howl({ urls: ['sounds/otherness/hits/OTH_GAT1_HIT.wav'] });
var onT = new Howl({ urls: ['sounds/otherness/hits/OTH_GAT2_HIT.wav'] });
var onY = new Howl({ urls: ['sounds/otherness/hits/OTH_HHAT_HIT.wav'] });
var onU = new Howl({ urls: ['sounds/otherness/hits/OTH_KIK_HIT.wav'] });
var onI = new Howl({ urls: ['sounds/otherness/hits/OTH_MOFO_HIT.wav'] });
var onO = new Howl({ urls: ['sounds/otherness/hits/OTH_NSA1_HIT.wav'] });
var onP = new Howl({ urls: ['sounds/otherness/hits/OTH_NSA2_HIT.wav'] });
var onA = new Howl({ urls: ['sounds/otherness/hits/OTH_NSA3_HIT.wav'] });
var onS = new Howl({ urls: ['sounds/otherness/hits/OTH_NWAV1_HIT.wav'] });
var onD = new Howl({ urls: ['sounds/otherness/hits/OTH_NWAV2_HIT.wav'] });
var onF = new Howl({ urls: ['sounds/otherness/hits/OTH_PAD_HIT.wav'] });
var onG = new Howl({ urls: ['sounds/otherness/hits/OTH_SNR_HIT.wav'] });
var onH = new Howl({ urls: ['sounds/otherness/hits/OTH_SQ1_HIT.wav'] });
var onJ = new Howl({ urls: ['sounds/otherness/hits/OTH_SQ2_HIT.wav'] });
var onK = new Howl({ urls: ['sounds/otherness/hits/OTH_TAMB_HIT.wav'] });
var onL = new Howl({ urls: ['sounds/otherness/hits/OTH_TBSS_HIT.wav'] });
var onZ = new Howl({ urls: ['sounds/otherness/hits/OTH_TEMP1_HIT.wav'] });
var onX = new Howl({ urls: ['sounds/otherness/hits/OTH_TEMP2_HIT.wav'] });
var onC = new Howl({ urls: ['sounds/otherness/hits/OTH_VX1_HIT.wav'] });
var onV = new Howl({ urls: ['sounds/otherness/hits/OTH_VX5_HIT.wav'] });
var onB = new Howl({ urls: ['sounds/otherness/hits/OTH_VX6_HIT.wav'] });
var onN = new Howl({ urls: ['sounds/otherness/hits/OTH_VX7_HIT.wav'] });
var onM = new Howl({ urls: ['sounds/otherness/hits/OTH_WURL_HIT.wav'] });

var on1 = new Howl({
  urls: ['sounds/otherness/loops/OTH_BASS_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var on2 = new Howl({
  urls: ['sounds/otherness/loops/OTH_DRUM_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var on3 = new Howl({
  urls: ['sounds/otherness/loops/OTH_GATS_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var on4 = new Howl({
  urls: ['sounds/otherness/loops/OTH_NSTA_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var on5 = new Howl({
  urls: ['sounds/otherness/loops/OTH_NWAV_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var on6 = new Howl({
  urls: ['sounds/otherness/loops/OTH_PAD_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var on7 = new Howl({
  urls: ['sounds/otherness/loops/OTH_SBAS_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var on8 = new Howl({
  urls: ['sounds/otherness/loops/OTH_TAMB_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var on9 = new Howl({
  urls: ['sounds/otherness/loops/OTH_TEMP_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});
var on0 = new Howl({
  urls: ['sounds/otherness/loops/OTH_WURL_LOOP.wav'],
  autoplay: true,
  loop: true,
  volume: 1.0,
  sprite: { main: [0, 8637, true] }
});

var loadedBank;

var circles = [];
var colours = ["#e8e7e7","#f28585","#ffffff","#ffdcdc","#968e8e","#000000","#e36c6c","#f4e4e4","#af3131","#413131","#5d5656","#e8e8e8","#fff6f6","#ededed","#f0e0e0","#e5cfcf"];

var can = document.getElementById('backgroundCanvas');
var context = can.getContext('2d');

var divertImage = new Raster({
  source: 'bg-divert',
  position: view.center,
});
divertImage.scale(view.size.width / divertImage.bounds.width);

var hundredWatersImage = new Raster({
  source: 'bg-hundred_waters',
  position: view.center,
});
hundredWatersImage.scale(view.size.width / hundredWatersImage.bounds.width);

var blowBackImage = new Raster({
  source: 'bg-blow_back',
  position: view.center,
});
blowBackImage.scale(view.size.width / blowBackImage.bounds.width);

var othernessImage = new Raster({
  source: 'bg-otherness',
  position: view.center,
});
othernessImage.scale(view.size.width / othernessImage.bounds.width);

var loadImage = new Raster({
  source: 'bg-loading',
  position: view.center,
});
loadImage.scale(view.size.width / loadImage.bounds.width);

//var textArea = new PointText(new Point(window.innerWidth - 50, window.innerHeight - 250));
//var textArea = new PointText(new Point(window.innerWidth * 0.96, window.innerHeight * 0.65));
var textHello = new PointText(new Point(50, 50));
textHello.content = 'Welcome! to the Otherness sampler';
textHello.fontFamily = 'tempogrunge';
textHello.fontSize = '20px';
textHello.fontweight = 'lighter';
textHello.fillColor = '#F69891';
textHello.justification = 'left';
textHello.visible = false;
var textArea = new PointText(new Point(50, 80));
textArea.content = 'A-Z play sounds\n0-9 play loops\nEnter changes song\nSpacebar mutes all';
textArea.fontFamily = 'tempogrunge';
textArea.fontSize = '16px';
textArea.fontweight = 'lighter';
textArea.fillColor = '#F69891';
textArea.justification = 'left';
textArea.visible = false;

//var textOrder = new PointText(new Point(window.innerWidth - 50, window.innerHeight - 150));
var textOrder = new PointText(new Point(window.innerWidth * 0.96, window.innerHeight * 0.80));
textOrder.content = 'BUY Otherness';
textOrder.fontFamily = 'tempogrunge';
textOrder.fontSize = '20px';
textOrder.fillColor = '#F69891';
textOrder.justification = 'right';
textOrder.visible = false;
textOrder.onMouseEnter = function (event) {
   document.body.style.cursor = "pointer";
   textOrder.fillColor = '#000000';
}
textOrder.onMouseLeave = function (event) {
   document.body.style.cursor = "";
   textOrder.fillColor = '#F69891';
}
textOrder.onClick = function (event) {
   window.open('http://smarturl.it/ggotherness','_blank');
}

//var textLink = new PointText(new Point(window.innerWidth - 50, window.innerHeight - 125));
var textLink = new PointText(new Point(window.innerWidth * 0.96, window.innerHeight * 0.83));
textLink.content = 'GO to graysongilmour.com';
textLink.fontFamily = 'tempogrunge';
textLink.fontSize = '20px';
textLink.fillColor = '#F69891';
textLink.justification = 'right';
textLink.visible = false;
textLink.onMouseEnter = function (event) {
   document.body.style.cursor = "pointer";
   textLink.fillColor = '#000000';
}
textLink.onMouseLeave = function (event) {
   document.body.style.cursor = "";
   textLink.fillColor = '#F69891';
}
textLink.onClick = function (event) {
   window.open('http://graysongilmour.com','_blank');
}

var isReady = false;
var isMobile = false;

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   hundredWatersImage.visible = false;
   blowBackImage.visible = false;
   othernessImage.visible = false;
   loadImage.visible = false;
   divertImage.visible = true;
   document.getElementById('backgroundCanvas').style.background = 'rgba(254, 249, 227, 1.0)';
   isMobile = true;
   setTimeout("location.href = 'http://graysongilmour.com';", 4000);
}

Pace.on('done', function() {
   if (!isMobile) {
      loadOtherness();
      isReady = true;
   }
});

var img01 = new Raster({
  source: '01',
  position: view.center,
});
img01.scale(view.size.width / img01.bounds.width);
img01.visible = false;

var img02 = new Raster({
  source: '02',
  position: view.center,
});
img02.scale(view.size.width / img02.bounds.width);
img02.visible = false;

var img03 = new Raster({
  source: '03',
  position: view.center,
});
img03.scale(view.size.width / img03.bounds.width);
img03.visible = false;

var img04 = new Raster({
  source: '04',
  position: view.center,
});
img04.scale(view.size.width / img04.bounds.width);
img04.visible = false;

var img05 = new Raster({
  source: '05',
  position: view.center,
});
img05.scale(view.size.width / img05.bounds.width);
img05.visible = false;

var img06 = new Raster({
  source: '06',
  position: view.center,
});
img06.scale(view.size.width / img06.bounds.width);
img06.visible = false;

var img07 = new Raster({
  source: '07',
  position: view.center,
});
img07.scale(view.size.width / img07.bounds.width);
img07.visible = false;

var img08 = new Raster({
  source: '08',
  position: view.center,
});
img08.scale(view.size.width / img08.bounds.width);
img08.visible = false;

var img09 = new Raster({
  source: '09',
  position: view.center,
});
img09.scale(view.size.width / img09.bounds.width);
img09.visible = false;

var img00 = new Raster({
  source: '00',
  position: view.center,
});
img00.scale(view.size.width / img00.bounds.width);
img00.visible = false;

//var text = "Welcome! to the Otherness sampler. Keys A-Z trigger hits, 0-9 trigger loops";
//context.fillText(text, 40, 20);
//context.fill();
//context.fillStyle = "black"; // font color to write the text with
//context.textBaseline = "top";

// context.fillStyle = "red";
// context.fillStyle = 'rgba(225,225,255,0.5)';;
// context.fillRect(100, 100, 480, 480);
// context.beginPath();
// var radius = 100; // for example
// context.arc(200, 200, radius, 0, Math.PI * 2);
// context.closePath();
// context.fillText(text, 200-radius/4 ,200-radius/2);

function onKeyDown(event) {
  if (isReady) {
	  loadImage.visible = false;
          textHello.visible = true;
          textArea.visible = true;
          textOrder.visible = true;
          textLink.visible = true;
          document.getElementById('backgroundCanvas').style.background = 'rgba(254, 249, 227, 1.0)';

	  if (event.key == 'enter') {
	  	changeBank();
	  }
	  if (event.key == '1') {
	    if (loop1on) { loop1.mute(); img01.visible = false; }
	    else { loop1.unmute(); img01.visible = true; }
	    loop1on = !loop1on;
	  }
	  if (event.key == '2') {
	    if (loop2on) { loop2.mute(); img02.visible = false; }
	    else { loop2.unmute(); img02.visible = true; }
	    loop2on = !loop2on;
	  }
	  if (event.key == '3') {
	    if (loop3on) { loop3.mute(); img03.visible = false; }
	    else { loop3.unmute(); img03.visible = true; }
	    loop3on = !loop3on;
	  }
	  if (event.key == '4') {
	    if (loop4on) { loop4.mute(); img04.visible = false; }
	    else { loop4.unmute(); img04.visible = true; }
	    loop4on = !loop4on;
	  }
	  if (event.key == '5') {
	    if (loop5on) { loop5.mute(); img05.visible = false; }
	    else { loop5.unmute(); img05.visible = true; }
	    loop5on = !loop5on;
	  }
	  if (event.key == '6') {
	    if (loop6on) { loop6.mute(); img06.visible = false; }
	    else { loop6.unmute(); img06.visible = true; }
	    loop6on = !loop6on;
	  }
	  if (event.key == '7') {
	    if (loop7on) { loop7.mute(); img07.visible = false; }
	    else { loop7.unmute(); img07.visible = true; }
	    loop7on = !loop7on;
	  }
	  if (event.key == '8') {
	    if (loop8on) { loop8.mute(); img08.visible = false; }
	    else { loop8.unmute(); img08.visible = true; }
	    loop8on = !loop8on;
	  }
	  if (event.key == '9') {
	    if (loop9on) { loop9.mute(); img09.visible = false; }
	    else { loop9.unmute(); img09.visible = true; }
	    loop9on = !loop9on;
	  }
	  if (event.key == '0') {
	    if (loop0on) { loop0.mute(); img00.visible = false; }
	    else { loop0.unmute(); img00.visible = true; }
	    loop0on = !loop0on;
	  }

	  if (event.key == 'space') {
	    muteLoops();
	  }
	  if(keyData[event.key]){
	    var maxPoint = new Point(view.size.width, view.size.height);
	    var randomPoint = Point.random();
	    var point = maxPoint * randomPoint;
	    var randomNumber = Math.floor(Math.random()*colours.length);
	    var newCircle = new Path.Circle(point, 50);
	    //newCircle.fillColor = keyData[event.key].color
	    newCircle.fillColor = colours[randomNumber];
	    keyData[event.key].sound.play();
	    circles.push(newCircle);
	  }
	}
}

function onFrame(event){
  for(var i = 0; i < circles.length; i++){
    circles[i].fillColor.hue += 1;
    circles[i].scale(0.9);
  }
}

function changeBank() {
  stopLoops();
  if (loadedBank == 1) {
    loadHundredWaters();
  }
  else if (loadedBank == 2) {
    loadBlowBack();
  }
  else if (loadedBank == 3) {
    loadOtherness();
  }
}

function muteLoops() {
  loop1.mute();
  loop1on = false;
  img01.visible = false;
  loop2.mute();
  loop2on = false;
  img02.visible = false;
  loop3.mute();
  loop3on = false;
  img03.visible = false;
  loop4.mute();
  loop4on = false;
  img04.visible = false;
  loop5.mute();
  loop5on = false;
  img05.visible = false;
  loop6.mute();
  loop6on = false;
  img06.visible = false;
  loop7.mute();
  loop7on = false;
  img07.visible = false;
  loop8.mute();
  loop8on = false;
  img08.visible = false;
  loop9.mute();
  loop9on = false;
  img09.visible = false;
  loop0.mute();
  loop0on = false;
  img00.visible = false;
}

function stopLoops() {
  loop1.stop();
  loop1on = false;
  loop2.stop();
  loop2on = false;
  loop3.stop();
  loop3on = false;
  loop4.stop();
  loop4on = false;
  loop5.stop();
  loop5on = false;
  loop6.stop();
  loop6on = false;
  loop7.stop();
  loop7on = false;
  loop8.stop();
  loop8on = false;
  loop9.stop();
  loop9on = false;
  loop0.stop();
  loop0on = false;
}

function loadHundredWaters() {
  keyData = {
    q: {
      sound: hwQ,
      color: '#e8e7e7'
    },
    w: {
      sound: hwW,
      color: '#f28585'
    },
    e: {
      sound: hwE,
      color: '#ffffff'
    },
    r: {
      sound: hwR,
      color: '#ffdcdc'
    },
    t: {
      sound: hwT,
      color: '#968e8e'
    },
    y: {
      sound: hwY,
      color: '#000000'
    },
    u: {
      sound: hwU,
      color: '#e36c6c'
    },
    i: {
      sound: hwI,
      color: '#f4e4e4'
    },
    o: {
      sound: hwO,
      color: '#af3131'
    },
    p: {
      sound: hwP,
      color: '#413131'
    },
    a: {
      sound: hwA,
      color: '#5d5656'
    },
    s: {
      sound: hwS,
      color: '#e8e8e8'
    },
    d: {
      sound: hwD,
      color: '#fff6f6'
    },
    f: {
      sound: hwF,
      color: '#ededed'
    },
    g: {
      sound: hwG,
      color: '#f0e0e0'
    },
    h: {
      sound: hwH,
      color: '#e5cfcf'
    },
    j: {
      sound: hwJ,
      color: '#e8e7e7'
    },
    k: {
      sound: hwK,
      color: '#f28585'
    },
    l: {
      sound: hwL,
      color: '#ffffff'
    },
    z: {
      sound: hwZ,
      color: '#ffdcdc'
    },
    x: {
      sound: hwX,
      color: '#968e8e'
    },
    c: {
      sound: hwC,
      color: '#000000'
    },
    v: {
      sound: hwV,
      color: '#e36c6c'
    },
    b: {
      sound: hwB,
      color: '#f4e4e4'
    },
    n: {
      sound: hwN,
      color: '#af3131'
    },
    m: {
      sound: hwM,
      color: '#413131'
    }

  }

  loop1 = hw1;
  loop2 = hw2;
  loop3 = hw3;
  loop4 = hw4;
  loop5 = hw5;
  loop6 = hw6;
  loop7 = hw7;
  loop8 = hw8;
  loop9 = hw9;
  loop0 = hw0;

  loop1.play('main');
  loop2.play('main');
  loop3.play('main');
  loop4.play('main');
  loop5.play('main');
  loop6.play('main');
  loop7.play('main');
  loop8.play('main');
  loop9.play('main');
  loop0.play('main');

  muteLoops();
  loadedBank = 2;
  othernessImage.visible = false;
  hundredWatersImage.visible = true;
  blowBackImage.visible = false;
}

function loadBlowBack() {
  keyData = {
    q: {
      sound: bbQ,
      color: '#e8e7e7'
    },
    w: {
      sound: bbW,
      color: '#f28585'
    },
    e: {
      sound: bbE,
      color: '#ffffff'
    },
    r: {
      sound: bbR,
      color: '#ffdcdc'
    },
      t: {
      sound: bbT,
      color: '#968e8e'
    },
    y: {
      sound: bbY,
      color: '#000000'
    },
    u: {
      sound: bbU,
      color: '#e36c6c'
    },
    i: {
      sound: bbI,
      color: '#f4e4e4'
    },
    o: {
      sound: bbO,
      color: '#af3131'
    },
    p: {
      sound: bbP,
      color: '#413131'
    },
    a: {
      sound: bbA,
      color: '#5d5656'
    },
    s: {
      sound: bbS,
      color: '#e8e8e8'
    },
      d: {
      sound: bbD,
      color: '#fff6f6'
    },
    f: {
      sound: bbF,
      color: '#ededed'
    },
    g: {
      sound: bbG,
      color: '#f0e0e0'
    },
    h: {
      sound: bbH,
      color: '#e5cfcf'
    },
    j: {
      sound: bbJ,
      color: '#e8e7e7'
    },
    k: {
      sound: bbK,
      color: '#f28585'
    },
    l: {
      sound: bbL,
      color: '#ffffff'
    },
    z: {
      sound: bbZ,
      color: '#ffdcdc'
    },
    x: {
      sound: bbX,
      color: '#968e8e'
    },
    c: {
      sound: bbC,
      color: '#000000'
    },
    v: {
      sound: bbV,
      color: '#e36c6c'
    },
    b: {
      sound: bbB,
      color: '#f4e4e4'
    },
    n: {
      sound: bbN,
      color: '#af3131'
    },
    m: {
      sound: bbM,
      color: '#413131'
    }

  }
  loop1 = bb1;
  loop2 = bb2;
  loop3 = bb3;
  loop4 = bb4;
  loop5 = bb5;
  loop6 = bb6;
  loop7 = bb7;
  loop8 = bb8;
  loop9 = bb9;
  loop0 = bb0;

  loop1.play('main');
  loop2.play('main');
  loop3.play('main');
  loop4.play('main');
  loop5.play('main');
  loop6.play('main');
  loop7.play('main');
  loop8.play('main');
  loop9.play('main');
  loop0.play('main');
  
  muteLoops();
  loadedBank = 3;
  othernessImage.visible = false;
  hundredWatersImage.visible = false;
  blowBackImage.visible = true;
}

function loadOtherness() {
  keyData = {
    q: {
      sound: onQ,
      color: '#e8e7e7'
    },
    w: {
      sound: onW,
      color: '#f28585'
    },
    e: {
      sound: onE,
      color: '#ffffff'
    },
    r: {
      sound: onR,
      color: '#ffdcdc'
    },
      t: {
      sound: onT,
      color: '#968e8e'
    },
    y: {
      sound: onY,
      color: '#000000'
    },
    u: {
      sound: onU,
      color: '#e36c6c'
    },
    i: {
      sound: onI,
      color: '#f4e4e4'
    },
    o: {
      sound: onO,
      color: '#af3131'
    },
    p: {
      sound: onP,
      color: '#413131'
    },
    a: {
      sound: onA,
      color: '#5d5656'
    },
    s: {
      sound: onS,
      color: '#e8e8e8'
    },
    d: {
      sound: onD,
      color: '#fff6f6'
    },
    f: {
      sound: onF,
      color: '#ededed'
    },
    g: {
      sound: onG,
      color: '#f0e0e0'
    },
    h: {
      sound: onH,
      color: '#e5cfcf'
    },
    j: {
      sound: onJ,
      color: '#e8e7e7'
    },
    k: {
      sound: onK,
      color: '#f28585'
    },
    l: {
      sound: onL,
      color: '#ffffff'
    },
    z: {
      sound: onZ,
      color: '#ffdcdc'
    },
    x: {
      sound: onX,
      color: '#968e8e'
    },
    c: {
      sound: onC,
      color: '#000000'
    },
    v: {
      sound: onV,
      color: '#e36c6c'
    },
    b: {
      sound: onB,
      color: '#f4e4e4'
    },
    n: {
      sound: onN,
      color: '#af3131'
    },
    m: {
      sound: onM,
      color: '#413131'
    }

  }
  loop1 = on1;
  loop2 = on2;
  loop3 = on3;
  loop4 = on4;
  loop5 = on5;
  loop6 = on6;
  loop7 = on7;
  loop8 = on8;
  loop9 = on9;
  loop0 = on0;

  loop1.play('main');
  loop2.play('main');
  loop3.play('main');
  loop4.play('main');
  loop5.play('main');
  loop6.play('main');
  loop7.play('main');
  loop8.play('main');
  loop9.play('main');
  loop0.play('main');
  
  muteLoops();
  loadedBank = 1;
  othernessImage.visible = true;
  hundredWatersImage.visible = false;
  blowBackImage.visible = false;
}

window.onresize = function(event) {
   location.reload();
}