var thisTrack = document.getElementById('music');

// set audio to loop (optional)
thisTrack.loop = true;

// references to svg objects
var itemOne = document.querySelector('.item.one');
var itemTwo = document.querySelector('.item.two');
var body = document.body;
var $color = '#6cf';
var $highlight = '#f66';

// timeline set up, note that paused is set to true as the playback 
// will be controlled by the audio to keep in sync
var timeline1 = new TimelineMax({
	paused: true
});

var time = undefined;

// thisTrack.onloadedmetadata = function() {
//   time = thisTrack.duration;
// 	console.log( time );
// }; // I'm not sure why this part isn't getting the duration propertly...

time = 13.81875;

timeline1
	.to(itemOne, (time/3), {
		x: 150,
		color: '#fff'
	})
	.to(itemOne, (time/3), {
		x: 400,
		color: $color
	})
	.to(itemOne, (time/3), {
		x: 0,
		color: '#fff'
	})
;

var timeline2 = new TimelineMax({
	paused: true
});

timeline2
	.to(itemTwo, (time/3), {
		x: 400
	})
	.to(itemTwo, (time/3), {
		x: 150
	})
	.to(itemTwo, (time/3), {
		x: 0
	})
;

var timeline3 = new TimelineMax({
	paused: true
});

timeline3
	.fromTo(body, time, {
		backgroundColor: $color
	}, {
		backgroundColor: $highlight
	})
;

// when the music is played, play the animation
thisTrack.onplay = function() {
	timeline1.play();
	timeline2.play();
	timeline3.play();
};

// when the music is paused, pause the animation
thisTrack.onpause = function() {
	timeline1.pause();
	timeline2.pause();
	timeline3.pause();
};

// when the progress bar on the audio element is jumped to a different
// point manually (or automatically), adjust the timeline to match
thisTrack.onseeked = function() {
	timeline1.time(thisTrack.currentTime);
	timeline2.time(thisTrack.currentTime);
	timeline3.time(thisTrack.currentTime);
}

// while the audio is being played, make sure the timelines are in sync 
// with the audio (it otherwise appears to go out of sync if, for 
// example, the tab is not in focus)
thisTrack.ontimeupdate = function() {
	timeline1.time(thisTrack.currentTime);
	timeline2.time(thisTrack.currentTime);
	timeline3.time(thisTrack.currentTime);
};