// JavaScript Document
$(document).ready(function(){
	$('#timecode').html("0:00");
	var music = document.getElementById('player')
	
	// Display our progress bar
	music.addEventListener('timeupdate', function(){
 
	// How long is the track in seconds
	var length = music.duration;
 
	// Whereabouts are we in the track
	var secs = music.currentTime;
 
 	// How far through the track are we as a percentage
	var progress = (secs / length) * 100;
 
	// Change the width of the progress bar
	$('#progress').css({'width' : progress * 2.27}); // make this number the same as the length of your audio scrubber two decimal places to the left
 
	// And finally calculate where we are in the track
	var tcMins = parseInt(secs/60);
  var tcSecs = parseInt(secs - (tcMins * 60));
 
 	// If the number of seconds is less than 10, add a '0'
	if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
 
	// Display the time
	$('#timecode').html(tcMins + ':' + tcSecs);
 
	}, false);
	
	$(function(){
		$("#event_type_id").change(function () {
			var val = $(this).val();
			switch(parseInt(val)){
			case 1:
				document.getElementById('player1').pause();
				document.getElementById('player2').pause();
				document.getElementById('player3').pause();
				document.getElementById('player4').pause();
				var music = document.getElementById('player');
				document.getElementById('player').currentTime = 0;
				document.getElementById('player').play();
				$("#play").attr("onclick", "document.getElementById('player').play()");
				$("#pause").attr("onclick", "document.getElementById('player').pause()");
				
				// Display our progress bar
				music.addEventListener('timeupdate', function(){
			 
				// How long is the track in seconds
				var length = music.duration;
			 
				// Whereabouts are we in the track
				var secs = music.currentTime;
			 
				// How far through the track are we as a percentage
				var progress = (secs / length) * 100;
			 
				// Change the width of the progress bar
				$('#progress').css({'width' : progress * 2.27}); // make this number the same as the length of your audio scrubber two decimal places to the left
			 
				// And finally calculate where we are in the track
				var tcMins = parseInt(secs/60);
			  var tcSecs = parseInt(secs - (tcMins * 60));
			 
				// If the number of seconds is less than 10, add a '0'
				if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
			 
				// Display the time
				$('#timecode').html(tcMins + ':' + tcSecs);
			 
				}, false);
				
				break;
				
			case 2:
				document.getElementById('player').pause();
				document.getElementById('player2').pause();
				document.getElementById('player3').pause();
				document.getElementById('player4').pause();
				document.getElementById('player1').currentTime = 0;
				var music = document.getElementById('player1');
				document.getElementById('player1').play();
				$("#play").attr("onclick", "document.getElementById('player1').play()");
				$("#pause").attr("onclick", "document.getElementById('player1').pause()");
				
				$('#timecode').html("0:00");
	
				// Display our progress bar
				music.addEventListener('timeupdate', function(){
			 
				// How long is the track in seconds
				var length = music.duration;
			 
				// Whereabouts are we in the track
				var secs = music.currentTime;
			 
				// How far through the track are we as a percentage
				var progress = (secs / length) * 100;
			 
				// Change the width of the progress bar
				$('#progress').css({'width' : progress * 2.27}); // make this number the same as the length of your audio scrubber two decimal places to the left
			 
				// And finally calculate where we are in the track
				var tcMins = parseInt(secs/60);
			  var tcSecs = parseInt(secs - (tcMins * 60));
			 
				// If the number of seconds is less than 10, add a '0'
				if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
			 
				// Display the time
				$('#timecode').html(tcMins + ':' + tcSecs);
			 
				}, false);
				
				break;
				
			case 3:
				document.getElementById('player').pause();
				document.getElementById('player1').pause();
				document.getElementById('player3').pause();
				document.getElementById('player4').pause();
				document.getElementById('player2').currentTime = 0;
				var music = document.getElementById('player2');
				document.getElementById('player2').play();
				$("#play").attr("onclick", "document.getElementById('player2').play()");
				$("#pause").attr("onclick", "document.getElementById('player2').pause()");
				
				$('#timecode').html("0:00");
	
				// Display our progress bar
				music.addEventListener('timeupdate', function(){
			 
				// How long is the track in seconds
				var length = music.duration;
			 
				// Whereabouts are we in the track
				var secs = music.currentTime;
			 
				// How far through the track are we as a percentage
				var progress = (secs / length) * 100;
			 
				// Change the width of the progress bar
				$('#progress').css({'width' : progress * 2.27}); // make this number the same as the length of your audio scrubber two decimal places to the left
			 
				// And finally calculate where we are in the track
				var tcMins = parseInt(secs/60);
			  var tcSecs = parseInt(secs - (tcMins * 60));
			 
				// If the number of seconds is less than 10, add a '0'
				if (tcSecs < 10) { tcSecs = '0' + tcSecs; };
			 
				// Display the time
				$('#timecode').html(tcMins + ':' + tcSecs);
			 
				}, false);
				
				break;
				
				
			case 4:
				document.getElementById('player').pause();
				document.getElementById('player1').pause();
				document.getElementById('player2').pause();
				document.getElementById('player4').pause();
				document.getElementById('player3').currentTime = 0;
				var music = document.getElementById('player3');
				document.getElementById('player3').play();
				$("#play").attr("onclick", "document.getElementById('player3').play()");
				$("#pause").attr("onclick", "document.getElementById('player3').pause()");
				
				$('#timecode').html("0:00");
	
				// Display our progress bar
				music.addEventListener('timeupdate', function(){
			 
				// How long is the track in seconds
				var length = music.duration;
			 
				// Whereabouts are we in the track
				var secs = music.currentTime;
			 
				// How far through the track are we as a percentage
				var progress = (secs / length) * 100;
			 
				// Change the width of the progress bar
				$('#progress').css({'width' : progress * 2.27}); // make this number the same as the length of your audio scrubber two decimal places to the left
			 
				// And finally calculate where we are in the track
				var tcMins = parseInt(secs/60);
			  var tcSecs = parseInt(secs - (tcMins * 60));
			 
				// If the number of seconds is less than 10, add a '0'
				if (tcSecs < 10) { tcSecs = '0' + tcSecs; };
			 
				// Display the time
				$('#timecode').html(tcMins + ':' + tcSecs);
			 
				}, false);
				
				break;
				
			case 5:
				document.getElementById('player').pause();
				document.getElementById('player1').pause();
				document.getElementById('player2').pause();
				document.getElementById('player3').pause();
				document.getElementById('player4').currentTime = 0;
				var music = document.getElementById('player4');
				document.getElementById('player4').play();
				$("#play").attr("onclick", "document.getElementById('player4').play()");
				$("#pause").attr("onclick", "document.getElementById('player4').pause()");
				
				$('#timecode').html("0:00");
	
				// Display our progress bar
				music.addEventListener('timeupdate', function(){
			 
				// How long is the track in seconds
				var length = music.duration;
			 
				// Whereabouts are we in the track
				var secs = music.currentTime;
			 
				// How far through the track are we as a percentage
				var progress = (secs / length) * 100;
			 
				// Change the width of the progress bar
				$('#progress').css({'width' : progress * 2.27}); // make this number the same as the length of your audio scrubber two decimal places to the left
			 
				// And finally calculate where we are in the track
				var tcMins = parseInt(secs/60);
			  var tcSecs = parseInt(secs - (tcMins * 60));
			 
				// If the number of seconds is less than 10, add a '0'
				if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
			 
				// Display the time
				$('#timecode').html(tcMins + ':' + tcSecs);
			 
				}, false);
				
				break;

			}
		});
	});

});