$(document).ready(function(){

	$("div#jPlayer div.button").hover(function(){
		$(this).css("background-color","#3e3e3e");
		$(this).css("cursor","pointer");
	}, function(){
		$(this).css("background-color","#1e1e1e");
	});
	var playItem = 0;
	var myPlayList = [
		{name:"past has gone",mp3:"http://jollyrogeronline.de/media/jolly_roger_past_has_gone.mp3"},
		{name:"amnesia",mp3:"http://jollyrogeronline.de/media/jolly_roger_amnesia.mp3"},
		{name:"surrender to life",mp3:"http://jollyrogeronline.de/media/jolly_roger_surrender_to_life.mp3"},
		{name:"live your life like riley",mp3:"http://jollyrogeronline.de/media/live_your_life_like_riley.mp3"},
		{name:"break the clouds",mp3:"http://jollyrogeronline.de/media/break_the_clouds.mp3"},
		{name:"life has changed",mp3:"http://jollyrogeronline.de/media/life_has_changed.mp3"}
		
	];

	$("#myPlayer").jPlayer({
		ready: function() {	
			displayPlayList();
			playListInit(false); // Parameter is a boolean for autoplay.
			//demoInstanceInfo($(this), $("#jplayer_info"));
		},
		swfPath: "/media",
		volume: 70
	})
	.jPlayerId("play", "player_play")
	.jPlayerId("pause", "player_pause")
	.jPlayerId("stop", "player_stop")
	.jPlayerId("loadBar", "player_progress_load_bar")
	.jPlayerId("playBar", "player_progress_play_bar")
	.onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
		var myPlayedTime = new Date(playedTime);
		var ptMin = (myPlayedTime.getUTCMinutes() < 10) ? "0" + myPlayedTime.getUTCMinutes() : myPlayedTime.getUTCMinutes();
		var ptSec = (myPlayedTime.getUTCSeconds() < 10) ? "0" + myPlayedTime.getUTCSeconds() : myPlayedTime.getUTCSeconds();
		$("#play_time").text(ptMin+":"+ptSec);
		var myTotalTime = new Date(totalTime);
		var ttMin = (myTotalTime.getUTCMinutes() < 10) ? "0" + myTotalTime.getUTCMinutes() : myTotalTime.getUTCMinutes();
		var ttSec = (myTotalTime.getUTCSeconds() < 10) ? "0" + myTotalTime.getUTCSeconds() : myTotalTime.getUTCSeconds();
		$("#total_time").text(ttMin+":"+ttSec);
	})
	.onSoundComplete( function() {
		playListNext();
	});

	$("#player_prev").click( function() {
		playListPrev();
		return false;
	});

	$("#player_next").click( function() {
		playListNext();
		return false;
	});

	function displayPlayList() {
		for (i=0; i < myPlayList.length; i++) {
			$("#playlist").append("<div class='plItem' id='playlist_item_"+i+"'><b>" + (i+1) + "</b> | " + myPlayList[i].name +"</div>");
			
			$("#playlist_item_"+i).data( "index", i ).hover(
				function() {
					if (playItem != $(this).data("index")) {
						$(this).addClass("playlist_hover");
					}
				},
				function() {
					$(this).removeClass("playlist_hover");
				}
			).click( function() {
				var index = $(this).data("index");
				if (playItem != index) {
					playListChange( index );
				} else {
					$("#myPlayer").play();
				}
			});
		}
	}
	function playListInit(autoplay) {
		if(autoplay) {
			playListChange( playItem );
		} else {
			playListConfig( playItem );
		}
	}
	function playListConfig( index ) {
	
		$("#playlist_item_"+playItem).removeClass("playlist_current");
		$("#playlist_item_"+index).addClass("playlist_current");
		playItem = index;
		$("#myPlayer").setFile(myPlayList[playItem].mp3);
		$("#song_title").html((playItem+1) + " | " + myPlayList[playItem].name);
	}
	function playListChange( index ) {
		playListConfig( index );
		$("#myPlayer").play();
		
	}
	function playListNext() {
		var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
		playListChange( index );
	}
	function playListPrev() {
		var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
		playListChange( index );
	}
	$("#togglePlaylist").click(function(){
		showPlaylist();
	});
	var isPlVisible;
	function showPlaylist()
	{
		if(isPlVisible){hidePlaylist();return;}
		isPlVisible = true;
		$("#topleftCorner").fadeIn("fast");
		$("#playlist").fadeIn("fast");
		
		$("div.plItem:first").css("display","block");
		var start = -27;
		$("div.plItem").each(function(){
			start -= 30;
			var elem = $(this);	
			$("#playlist").animate({ 
				top: start + "px"
				}, 80 , false, function(){
				elem.next().css("display","block");
			});
		});
		$(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("playerOuter"))
                  hidePlaylist();
        });
	}
	function hidePlaylist()
	{
		isPlVisible = false;
		$("#topleftCorner").fadeOut("fast");
		$("#playlist").fadeOut("fast", function()
		{
			$("div#playlist").css("top","-27px");
			$("div.plItem").css("display","none");
		});
	}
});