var GB_ROOT_DIR = PLAYLIST_ROOT_DIR + "greybox/";
var playlist_counter = 0;
function showPlaylist(xml_file, width, height){
	var playlist_name = 'play_list_' + playlist_counter;
	playlist_counter++;
	document.write('<div id="' + playlist_name + '" style="' + ((width != undefined) ? 'width:' + width : '') + '"></div>');
	$('#' + playlist_name).load(
		PLAYLIST_ROOT_DIR + 'playlist.php?xml=' + xml_file,
		null,
		function(){
			if( width != undefined ){
				$('#' + playlist_name).find('div.play_list_container').css('width', width + 'px');
			}
			if( height != undefined ){
				$('#' + playlist_name).find('div.play_list_container').css('height', height + 'px');
			}
			decoGreyboxLinks();
		}
	);
}

function activeTab(element){
	// get the playlist key
	playlist_key = $(element).parent().attr('id').substr(0, 32);

	// get the index of the clicked tab
	index = $(element).parent().attr('id').replace(playlist_key + '_tab_', '');

	// remove all tabberactive and afterActive class
	$(element).parents().find('ul.tabbernav').find('li').each(function(){
		if($(this).attr('id').substr(0, 32) == playlist_key){
			$(this)
				.removeClass('tabberactive')
				.removeClass('afterActive');
		}
		//alert($(this).attr('id'));
	});

	// add the active to the clicked li and afterActive to the next li
	$(element).parent()
		.addClass('tabberactive')
		.next('li').addClass('afterActive');

	// hide all the playlist container
	$(element).parents().find('div.playlist').find('div.play_list_container').each(function(){
		if($(this).attr('id').substr(0, 32) == playlist_key){
			$(this).hide();
		}
	});

	// show the selected container
	$('#' + playlist_key + '_playlist_' + index).show();
}