// JavaScript Document
function togglePlay() {
	
	var playPause = document.getElementById('playPauseButton');
	var audio = document.getElementById('iCanAudio');
	
//	playPause.style.backgroundPositionX = "119px";
	
	if (audio.paused) {playPause.style.backgroundPositionX = "119px";
					audio.play();
					}
	else {playPause.style.backgroundPositionX = "0px";
					audio.pause();
					}
		
}//end togglePlay function

function updateButton() {

var playPause = document.getElementById('playPauseButton');
var audio = document.getElementById('iCanAudio');
if (audio.paused) {playPause.style.backgroundPositionX = "0px";}
	else {playPause.style.backgroundPositionX = "119px";	}
	
if (audio.ended) {playPause.style.backgroundPositionX = "0px";}	

}

prettyPrintNumber = function (number) {
  return ((number < 10) ? '0' : '') + number;
}

prettyPrintTime = function (time) {
  var components = [];
  components[0] = prettyPrintNumber(Math.floor(time / 60));
  components[1] = prettyPrintNumber(Math.floor(time % 60));
  return components.join(':');
}

function timeChanged () {
  // figure out at what fraction of the total time we currently are
  var audio = document.getElementById('iCanAudio');
  var percentage = (audio.currentTime / audio.duration) * 100 + '%';
  var progress = document.getElementById('progressIndicator');
  progress.style.width = percentage;
  
  // update the elapsed time display with a nicely pretty-printed time
  document.getElementById('timeDisplay').innerText = prettyPrintTime(audio.currentTime);
 //   document.getElementById('timeDisplay').innerText = audio.currentTime;

}


 function myAddListener() {
	var audio = document.getElementById('iCanAudio');
	audio.addEventListener('play',updateButton,false);
	audio.addEventListener('pause',updateButton,false);
	audio.addEventListener('ended',updateButton,false);
	audio.addEventListener('timeupdate',timeChanged,false);

         }