var playlist_container = "div.sliderGallery";
var playlist_slider_class = ".slider";
var playlist_slider_handle_class = ".handle";
var playlist_item_id_prefix = "playlistItem";
var playlist_artwork_id = "#media-album-artwork";
var playlist_album_id = "#media-album";
var playlist_author_id = "#media-author";
var playlist_selected_item_class = "selectedPlaylistItem";
var playlist_download_button_id = "#download_button";
var playlist_download_enabled_class = "download_button_enabled";
var playlist_next_button_id = "#next_button";
var playlist_next_button_enabled_class = "next_button_enabled";
var playlist_back_button_id = "#back_button";
var playlist_back_button_enabled_class = "back_button_enabled";
var playlist_ul_id = "#playlist";

var playlistInit = { container: null, ul: null, min: 0, max: 100 };

function initPlaylist() {
	playlistInit.container = $(playlist_container);
	playlistInit.ul = $('ul', playlistInit.container);
	
	playlistInit.max = playlistInit.ul.innerHeight() - playlistInit.container.outerHeight();
	$(playlist_slider_class).slider({
		min: playlistInit.min,
		max: playlistInit.max,
		handle: playlist_slider_handle_class,
		orientation: 'vertical',
		value: playlistInit.max,
		stop: function (event, ui) {
//			ul.animate({'top' : ui.value * -1}, 500);
			playlistInit.ul.css('top', (playlistInit.max-ui.value)*-1);
		},
		change: function (event, ui) {
			playlistInit.ul.css('top', (playlistInit.max - ui.value)*-1);
		},
		slide: function (event, ui) {
			playlistInit.ul.css('top', (playlistInit.max - ui.value)*-1);
		}
	});
}

function playlistSliderInc(selector, inc) {
	var sliderVal = $(selector).slider('value') + inc;
	if(sliderVal > $(selector).slider('option', 'max')) sliderVal =  $(selector).slider('option', 'max');
	if(sliderVal < $(selector).slider('option', 'min')) sliderVal =  $(selector).slider('option', 'min');
	$(selector).slider('value', sliderVal);
}

function scrollPlaylistTo(i) {
	var container = $(playlist_container);
	var ul = $('ul', container);

	var ulTopOffset = ul.offset().top;
	var topOffset = $("#" + playlist_item_id_prefix + i).offset().top;
	$(playlist_slider_class).slider("option", "value", (topOffset - ulTopOffset));
}

function destroyPlaylist() {
	$(playlist_slider_class).slider( "destroy" );
}
	
var playlist = new Array();
var currentPlaylistItem = 0;


function loadPlaylist(json_file) {
	$.getJSON(json_file,
		function(data){
			// Store playlist in global space
			var isFirst=true;
			playlist = data.items;

			// Clear existing playlist display
			var container = $(playlist_container);
			var ul = $('ul', container);
			ul.empty( );
			
			// Load "initial_item" and "initial_item_search_value" from JSON if there and not {false|null}
			if(data.initial_item != false && data.initial_item != null) {
				initial_item = data.initial_item;
			}
			if(data.initial_item_search_value != false && data.initial_item_search_value != null && data.initial_item_search_value != "") {
				initial_item_search_value = data.initial_item_search_value;
			}

			// Load data from playlist object into playlist display
			$.each(playlist, function(i,item){
				if (item.file!='') { // ignore blank entries
					$("<li onClick=\"selectPlayListItem(" + i + ");\" id=\"" + playlist_item_id_prefix + i + "\">" + item.name + "</li>").appendTo(playlist_ul_id);
					// Set the default item by search value
					if((isFirst) || (item.name == initial_item_search_value)) {
						initial_item = i;
						isFirst=false;
					}
				}
			});
			destroyPlaylist();
			initPlaylist();
			if(playlist.length > 0) {
				selectPlayListItem(initial_item);
				scrollPlaylistTo(initial_item);
			} else {
				loadFile(playerId, '');
			}
		}
	);
	/* Playlist content per item:
	1) Name
	2) Author
	3) Collection / Album
	4) Thumbnail Image
	5) File URL
	*/
	/*
	({
		"items": [
			{
				"name": "nameValue",
				"author": "authorValue",
				"collection": "collectionValue",
				"thumbnail": "http://imageURL",
				"file": "http://fileURL"
			}, 
			{
				"name": "nameValue",
				"author": "authorValue",
				"collection": "collectionValue",
				"thumbnail": "http://imageURL",
				"file": "http://fileURL"
			}
		]
	})
	*/				
}

function selectPlayListItem(i, startPlayingImmediately) {
	// startPlayingImmediately is an optional parameter, default "true"
	if(startPlayingImmediately == null) {
		startPlayingImmediately = true;
	}
	playlistItem = playlist[i];
	// Change displayed artwork, author, album
	$(playlist_artwork_id).css("background-image", "url(" + playlistItem.thumbnail + ")");
	$(playlist_author_id).html(playlistItem.author);
	$(playlist_album_id).html(playlistItem.collection);
	// De-select current item (css)
	$("#" + playlist_item_id_prefix + currentPlaylistItem).removeClass(playlist_selected_item_class);
	// Select new item (css)
	$("#" + playlist_item_id_prefix + i).addClass(playlist_selected_item_class);
	currentPlaylistItem = i;
	// Scroll playlist box to new item
	scrollPlaylistTo(i);
	// Play file
	if(startPlayingImmediately == true) {
		loadFileAndPlay(playerId, playlistItem.file, playlistItem.media_type);
	} else {
		loadFile(playerId, playlistItem.file, playlistItem.media_type);
	}
	// Setup the "download this media" button
	if(playlistItem.canDownload == true) {
		// Enabled graphic
		$(playlist_download_button_id).addClass(playlist_download_enabled_class);
		$(playlist_download_button_id).attr("onClick", "window.open(\"" + playlistItem.file + "\")");
	} else {
		// Disabled graphic
		$(playlist_download_button_id).removeClass(playlist_download_enabled_class);		
		$(playlist_download_button_id).removeAttr( "onClick" );
	}
	// Setup the "next" and "back" buttons
	if((i+1) < playlist.length) {
		$(playlist_next_button_id).addClass(playlist_next_button_enabled_class);
		$(playlist_next_button_id).attr("onClick", "selectPlayListItem(" + (i+1) + ");");
	} else {
		$(playlist_next_button_id).removeClass(playlist_next_button_enabled_class);		
		$(playlist_next_button_id).removeAttr("onClick");		
	}
	if((i-1) >= 0 && playlist.length > 0) {
		$(playlist_back_button_id).addClass(playlist_back_button_enabled_class);
		$(playlist_back_button_id).attr("onClick", "selectPlayListItem(" + (i-1) + ");");
	} else {
		$(playlist_back_button_id).removeClass(playlist_back_button_enabled_class);		
		$(playlist_back_button_id).removeAttr("onClick");		
	}
}