// we got some insite from here to get the sound file and some set up css
//https://p5js.org/reference/#/p5.SoundFile/pause

// Used FFT to analyse audio frequencies i got some help from this short code referenced 
// https://p5js.org/reference/#/p5.FFT



// css
AB.loadCSS ( 'uploads/destinyjames/open.css' );

var song;
var fft;
var button;
var button2;
var button3;

AB.newSplash (" <H2> PRESS SPACE TO START PLAYING ! </H2>"); // 
document.body.onkeyup = function(e) {
  if (e.key == " " ||
      e.code == "Space" ||      
      e.keyCode == 32      
  ) {
    AB.removeSplash(); 
  }
}
//const SKYCOLOR = "Black";
function toggleSong() {

  if (song2.isPlaying()) {
      
    song2.pause();}
  if (song2.isPaused)
    {
        song.play()
    }
    
}
function toggleSong2() {

  if (song.isPlaying()) {
      
    song.pause();}
  if (song.isPaused)
    {
        song2.play();
    }
  
}

function stopMusic(){
   
    song.pause();
    song2.pause();
}
// the two sounds used
function preload() {
  song = loadSound('/uploads/destinyjames/CentralCeexDave-SprinterINSTRUMENTAL.mp3');
  song2 = loadSound('/uploads/destinyjames/Drake-Rescue-Me-Official-Instrumental.mp3'); 
}

// creation of the buttons used in the program
function setup() {
  createCanvas(1500, 1000);
  colorMode(HSB);
  angleMode(DEGREES);
  button = createButton('Song 1');
  button2 = createButton('Song 2');
  button.mousePressed(toggleSong);
  button2.mousePressed(toggleSong2);
  button3 = createButton('Pause');
  button3.mousePressed(stopMusic);



  song.play();
  fft = new p5.FFT(0.10, 128);
}


 AB.world.newRun = function()                 
    {
        
		// console.log ( "newRun" );
		ABWorld.init (  SKYCOLOR  );}
		
// this unction is used to create the canvas with the sound spectrum		
function draw() {
  background(1);
  var circle = fft.analyze();
  
  noStroke();
  translate(width / 2, height / 2);
  for (var i = 0; i < circle.length; i++) {
    var angle = map(i, 0, circle.length, 0, 360);
    var amp = circle[i];
    var r = map(amp, 0, 256, 200, 500);
    //fill(i, 255, 255);
    var x = r * cos(angle);
    var y = r * sin(angle);
    stroke(i, 255, 255);
    line(0, 0, x, y);
    //vertex(x, y);
  }
}



function start()        // user has entered a password 
{
	var  password =  jQuery("input#p").val();
	password = password.trim();
	
	if ( ! alphanumeric ( password ) )
	{
	    $("#errordiv").html( "<font color=red> <B> Error: Password must be alphanumeric. </b></font> " );
	    return;
	}
	
	// else we have a password, start the socket run with this password 
    AB.socketStart ( password );  
    
    AB.removeSplash();   
}


  
function alphanumeric ( str ) 				// return if string is just alphanumeric   
{
	var rc = str.match(/^[0-9a-zA-Z]+$/); 			// start of line  "[0-9a-zA-Z]+"  end of line 
	
	if ( rc ) return true;
	else      return false; 
}