/* the playlist is just a JSON-style object.*/
var volume_button;
var volume_control;
var _debug = true;
function _log(text){
	if (_debug) 
if ('undefined' != typeof console) 
if ('function' == typeof console.log) 
if ('object' == typeof text) {
		console.log(text);
	}
	else {
		console.log('logged : ' + text);
	}
};

$(document).ready(function(){
	var aud = $('#jukebox .aud').get(0);
	aud.pos = 0;
	$("#progressbar").progressbar({ value: 0 });
	volume_button = document.getElementById('volume_button');
	//volume_control = document.getElementById('volume_control');
	
	//set the volume
	//set_volume(0.8);
	
	$('#jukebox .play').bind('click', function(evt){
		evt.preventDefault();
		if (aud.networkState == 0) {
			aud.pos = -1;
			$('#jukebox .next').trigger('click');
		}
		else {
			$('#jukebox .play').addClass('hide');
			$('#jukebox .pause').removeClass('hide');
			aud.play();
		}
	});
	
	$('#jukebox .pause').bind('click', function(evt){
		evt.preventDefault();
		$('#jukebox .pause').addClass('hide');
		$('#jukebox .play').removeClass('hide');
		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);
		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);
		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'))-10;
		var percentLoaded = Math.round(evt.loaded / evt.total * 100);
		var barWidth = Math.ceil(percentLoaded * (width / 100));
		//$('#jukebox .load-progress').css('width', barWidth);
		//$( "#progressbar" ).progressbar( "option", "value", barWidth );

	}, true);
	
	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 .duration-left').html(humanizeTime(aud.duration - aud.currentTime));
		$('#jukebox .duration-progress').html(humanizeTime(aud.currentTime));
		//$('#jukebox .play-progress').css('width', barWidth);
		$( "#progressbar" ).progressbar( "option", "value", barWidth );
	}, true);
	
	aud.addEventListener('canplay', function(evt){
		$('#jukebox .play').trigger('click');
	}, true);
	
	aud.addEventListener('ended', function(evt){
		$('#jukebox .next').trigger('click');
	}, true);
	
	aud.addEventListener('loadstart', function(evt){
		$('#jukebox .info').html(playlist[aud.pos].artist + " - " + playlist[aud.pos].title);
		$('#playlist li').removeClass('ui-priority-primary');
		$('#playlist li').removeClass('ui-state-active');
		$($('#playlist li')[aud.pos]).addClass('ui-priority-primary');
		$($('#playlist li')[aud.pos]).addClass('ui-state-active');
	}, true);
	
	loadPlaylistList(playlist);
	
	$('#jukebox .info').html(playlist[aud.pos].title);
	
	//temp for now so firefox will actually play the song
	aud.setAttribute('src', playlist[0].url);
	aud.setAttribute('autoplay', false);
	
	$('#playlist li').click(function(evt){
		position = $(this).attr("rel");
		
		aud.pause();
		aud.pos = position;
		aud.setAttribute('src', playlist[aud.pos].url);
		aud.load();
	})
	$("#volume_control").slider({
		orientation: 'horizontal',
		range: "min",
		value: 70,
		step: 1,
		animate: true
	});
	
	$('#jukebox .loader').click(function(e){
		var width = parseInt($('#jukebox').css('width'));
		//var pos = $( "#progressbar" ).progressbar("value");
		var dur = aud.duration;
		var k = (e.pageX - $(this).offset().left) / $(this).width();
		_log('dur=' + dur);
		_log(k);
		_log(dur*k);
		var $k = dur/k;
		$( "#progressbar" ).progressbar("value", k);
		aud.currentTime=$k;
	});
	
});

$("#volume_control").bind("slide", function(event, ui){
	volume = ui.value / 100;
	set_volume(volume);
	$("#volume_value").html(ui.value);
});
function set_volume(new_volume){
	aud = $('#jukebox .aud').get(0);
	aud.volume = new_volume;
}
/*playlist thing*/
function loadPlaylistList(list){
	$(list).each(function(i, item){
		$("<li rel=" + i + " class='ui-state-default' title='Click to play "+item.title+" by "+item.artist+"'>").html(item.title).appendTo("#playlist ul");
	})
}

humanizeTime = function(seconds){
	// Calculate the number of days left
	var days = Math.floor(seconds / 86400);
	// After deducting the days calculate the number of hours left
	var hours = Math.floor((seconds - (days * 86400)) / 3600)
	// After days and hours , how many minutes are left
	var minutes = Math.floor((seconds - (days * 86400) - (hours * 3600)) / 60)
	// Finally how many 86400 left after removing days, hours and minutes.
	var secs = Math.floor((seconds - (days * 86400) - (hours * 3600) - (minutes * 60)))
	
	var x = 0;
	if (days > 0) 
		x = (days + " : " + pad(hours) + " : " + pad(minutes) + " :" + pad(secs));
	else if (hours > 0) 
		x = (pad(hours) + " : " + pad(minutes) + " :" + pad(secs));
	else x = (pad(minutes) + " :" + pad(secs));
	
	return x;
}
pad = function(number){
	var str = "" + number, length = 2;
	while (str.length < length) {
		str = '0' + str;
	}
	return str;
}

$(function(){
	/* Bind  functions for handling css class to jQuery events */
	$(".ui-state-default:not(.ui-state-disabled)").live("mouseover", function(){
		$(this).addClass("ui-state-hover");
	});
	$(".ui-state-default:not(.ui-state-disabled)").live("mouseout", function(){
		$(this).removeClass("ui-state-hover").removeClass("ui-state-focus");
	});
	$(".ui-state-default:not(.ui-state-disabled)").live("mousedown", function(){
		$(this).addClass("ui-state-focus");
	});
	$(".ui-state-default:not(.ui-state-disabled)").live("mouseup", function(){
		$(this).removeClass("ui-state-focus");
	});
	$(".ui-state-default:not(.ui-state-disabled)").live("focus", function(){
		$(this).addClass("ui-state-hover");
	});
	$(".ui-state-default:not(.ui-state-disabled)").live("blur", function(){
		$(this).removeClass("ui-state-hover");
		$(this).removeClass("ui-state-focus");
	});
	$(".ui-state-default:not(.ui-state-disabled)").live("keydown", function(){
		$(this).addClass("ui-state-focus");
	});
	$(".ui-state-default:not(.ui-state-disabled)").live("keyup", function(){
		$(this).removeClass("ui-state-focus");
	});
});