var room = new window.AudioContext() || window.webkitAudioContext() || window.webAudioContext();

// oscillators
var osc1 = room.createOscillator();
osc1.type = 'square';

var osc2 = room.createOscillator();
osc2.type = 'sawtooth';

var osc3 = room.createOscillator();
osc3.type = 'sine';

var osc4 = room.createOscillator();
osc4.type = 'triangle';

var f = 0;

// volume
var amp1 = room.createGain();
var amp2 = room.createGain();
var amp3 = room.createGain();
var amp4 = room.createGain();
var mix = room.createGain();
mix.gain.value = 0;

// wires
osc1.connect(amp1);
osc2.connect(amp2);
osc3.connect(amp3);
osc4.connect(amp4);
amp1.connect(mix);
amp2.connect(mix);
amp3.connect(mix);
amp4.connect(mix);
mix.connect(room.destination);

// mixing
function mixing(x,y){
  f = Math.sqrt(Math.pow(x,2) + Math.pow(y,2))*400 + 10;
  osc1.frequency.value = f/2;
  osc2.frequency.value = f/3;
  osc3.frequency.value = f*3;
  osc4.frequency.value = f*2;

  var right = Math.atan2(y,x);
  var left = Math.atan2(y,-x);
  var a;

  // lower right half-sector
  a = (right + Math.PI*0.25)/Math.PI;
  a = Math.min(1.0,a);
  a = Math.max(0.0,a);
  a = 1 - Math.abs((a - 0.5)*2);
  amp1.gain.value = a;

  // top right half-sector
  a = (right - Math.PI*0.25)/Math.PI;
  a = Math.min(0.0,a);
  a = Math.max(-1.0,a);
  a = 1 - Math.abs((a + 0.5)*2);
  amp2.gain.value = a;

  //top left half-sector
  a = (left - Math.PI*0.25)/Math.PI;
  a = Math.min(0.0,a);
  a = Math.max(-1.0,a);
  a = 1 - Math.abs((a + 0.5)*2);
  amp3.gain.value = a;

  // lower right half-sector
  a = (left + Math.PI*0.25)/Math.PI;
  a = Math.min(1.0,a);
  a = Math.max(0.0,a);
  a = 1 - Math.abs((a - 0.5)*2);
  amp4.gain.value = a;
}
        
var neverStarted = true;
function startup(){
  console.log('starting')
  if(neverStarted){
    osc1.start(0);
    osc2.start(0);
    osc3.start(0);
    osc4.start(0);
    draw();
  }
  neverStarted = false;
}

		// draw oscilloscope
		var analyser = room.createAnalyser();
		analyser.fftSize = 2048;
		var bufferLength = analyser.fftSize;
		var dataArray = new Uint8Array(bufferLength);
		analyser.getByteTimeDomainData(dataArray);
		var i;
		var scope = document.getElementById('scope');
		var sliceWidth = window.innerWidth / bufferLength * 2.0;
		var freqReadout = document.getElementById('frequency');

		mix.connect(analyser);

		function draw(){
			analyser.getByteTimeDomainData(dataArray);
			var points = [];
			var x = 0;
			var firstZero;
			for(i=1; i<bufferLength; i++){
				var y = dataArray[i] / 128 * window.innerHeight/2;
				if(firstZero !== undefined){
					points.push(x,y);
					x += sliceWidth;
				}
				if((dataArray[i] >= 128 && dataArray[i-1] < 128)
				|| (dataArray[i] <= 128 && dataArray[i-1] > 128)){
					if(firstZero === undefined && (dataArray[i] >= 128 && dataArray[i-1] < 128))
						firstZero = i;
				}
			}
			mousey = false;
			scope.setAttributeNS(null,'points',points.join(','));

			freqReadout.textContent = f.toPrecision(8) + ' Hz';

			requestAnimationFrame(draw); //loop
		}
		

		// desktop input interaction
    document.body.onmousedown = function(event){
            startup();
		};
		document.body.onmouseover = function(event){
            mix.gain.value = 0.5;
		};
		document.body.onmousemove = function(event){
			var x = event.clientX / window.innerWidth - 0.5;
			var y = event.clientY / window.innerHeight - 0.5;
			mixing(x,y);
		};
		document.body.onmouseout = function(event){
			mix.gain.value = 0;
		};

		// mobile input interaction
		var viewport = document.createElement("meta");
		viewport.setAttribute('name', 'viewport');
		viewport.setAttribute('content', 'width=device-width, initial-scale=1');
		document.getElementsByTagName('head')[0].appendChild(viewport);

		document.body.ontouchstart = function(event){
      startup();
			mix.gain.value = 0.5;
			var x = event.pageX / window.innerWidth - 0.5;
			var y = event.pageY / window.innerHeight - 0.5;
			mixing(x,y);
			event.preventDefault();
		};

		document.body.ontouchmove = function(event){
			var x = event.pageX / window.innerWidth - 0.5;
			var y = event.pageY / window.innerHeight - 0.5;
			mixing(x,y);
			event.preventDefault();
		};

		document.body.ontouchend = function(event){
			mix.gain.value = 0;
			event.preventDefault();
		};