function jukebox( playlist ) {
	
	var aud = $('#jukebox .aud').get(0);
	aud.pos = -1;
		
	// add songs in playlist to the music player interface
	var song, songlist = $('#jukebox .songlist');
	 
	for ( var i in playlist ) {
		
		song = playlist[i];
		$song = $("<div class=\"song\"><a href=\"" + song.url + "\" pos=\"" + i + "\">" + song.title + "</a></div>");
		$(songlist).append($song);
	}
	
	$(songlist).bind('click', function(evt) {
		evt.preventDefault();
		target = evt.target;
		
		// make sure we tkae "song clicks" only
		if( evt.target.nodeName != "A") { 
			return; 
		} 
		
		aud.pause();	
		aud.pos = $(target).attr('pos'); 		
		aud.src = $(target).attr('href');
		aud.load()
		aud.play();
		
		title = $(target).text();
		$('#jukebox .current_song').html(title);
	});
	
	$('#jukebox .play').bind('click', function(evt) {
		evt.preventDefault();
		if (aud.pos < 0) {
			$('#jukebox .next').trigger('click');
		} else {
			aud.play();
		}
	});
	
	$('#jukebox .pause').bind('click', function(evt) {
		evt.preventDefault();
		aud.pause();
	});
	
	$('#jukebox .next').bind('click', function(evt) {
		evt.preventDefault();
		aud.pause();
		aud.pos++;
		if (aud.pos == playlist.length) aud.pos = 0;
		aud.setAttribute('src', playlist[aud.pos].url);
		$('#jukebox .current_song').html(playlist[aud.pos].title);
		aud.load();
	});
	
	$('#jukebox .prev').bind('click', function(evt) {
		evt.preventDefault();
		aud.pause();
		aud.pos--;
		if (aud.pos < 0) aud.pos = playlist.length - 1;
		aud.setAttribute('src', playlist[aud.pos].url);
		$('#jukebox .current_song').html(playlist[aud.pos].title);
		aud.load();
	});
	
	// JQuery doesn't seem to like binding to these HTML 5
	// media events, but addEventListener does just fine
	
	aud.addEventListener('progress', function(evt) {
		//var width = parseInt($('#jukebox').css('width'));
		var percentLoaded = Math.round(evt.loaded / evt.total * 100);
		//var barWidth = Math.ceil(percentLoaded * (width / 100));
		//$('#jukebox .load-progress').css( 'width', barWidth  );
		$('#jukebox .load-progress').css( 'width', percentLoaded + '%' );		
		
	});
	
	aud.addEventListener('timeupdate', function(evt) {
	    //var width = parseInt($('#jukebox').css('width'));
		var percentPlayed = Math.round(aud.currentTime / aud.duration * 100);
		//var barWidth = Math.ceil(percentPlayed * (width / 100));
		//$('#jukebox .play-progress').css( 'width', barWidth + '%');
		$('#jukebox .play-progress').css( 'width', percentPlayed + '%');
		
	});
	
	aud.addEventListener('canplay', function(evt) {
		$('#jukebox .play').trigger('click');
	});
	
	aud.addEventListener('ended', function(evt) {
		$('#jukebox .next').trigger('click');
	});
	
	$('#jukebox .current_song').html(playlist[0].title);	

	$('#jukebox .current_song').html(playlist[0].title);
	aud.setAttribute('src', playlist[0].url);
	aud.load();

	
}

/*
(function ($) {
  $.fn.jukebox = jukebox;  
})(jQuery);
*/