var play_state;
var track_number;
var artist;
var title;
var volume;
var audio = new Array(3);

function init() {
    
        initAnimation();
        
	//initialize variables
	play_state=false;
	track_number=0;
	volume=0.6;

	// Invoke new Audio object
	audio[0] = new Audio('audio/song0.ogg');
	audio[1] = new Audio('audio/song1.ogg');
	audio[2] = new Audio('audio/song2.ogg');
	for (var k=0; k<3; k++) {
		audio[k].volume = volume;}

	// Get the play button and append an audio play method to onclick
	var play = document.getElementById('play');
	play.addEventListener('click', function(){
		if (!play_state) {
			audio[track_number].play();
			play_state=true;
                        document.getElementById("play").setAttribute("class", "pause");}
		else {
			audio[track_number].pause();
			play_state=false;
                        document.getElementById("play").setAttribute("class", "play");}
                    
	}, false);

	// Get the forward button and implement skip method to onclick
	var forward = document.getElementById('forward');
	forward.addEventListener('click', function(){
                  
		audio[track_number].pause();
		track_number = (track_number+1)%3;
		if (play_state) {audio[track_number].play();}                                        
                updateInfo();
	}, false);

	// Get the back button and implement skip method to onclick
	var backward = document.getElementById('backward');
	backward.addEventListener('click', function(){
		audio[track_number].pause();
		track_number = (track_number+2)%3;
		if (play_state) {audio[track_number].play();}
                updateInfo();
	}, false);

	//Get the up button and increase the volume
	var up = document.getElementById('up');
	up.addEventListener('click', function(){
		if (volume <= 0.8) {volume += 0.2;}
		for (var i=0; i<3; i++) {
			audio[i].volume = volume;}
	}, false);

	//Get the down button and decrease the volume
	var down = document.getElementById('down');
	down.addEventListener('click', function(){
		if (volume >= 0.2) {volume -= 0.2;}
		for (var j=0; j<3; j++) {
			audio[j].volume = volume;}
	}, false);

}

function updateInfo() {
                //Update the track info
                artist = "partist" + (track_number+1);
                artist = document.getElementById(artist).innerHTML;
                title = "ptitle" + (track_number+1);
                title = document.getElementById(title).innerHTML;
                document.getElementById('track-details').innerHTML = artist + " : <span>" + title + "</span>"; 
}