'use strict;'

	// parameters
var playerHeight		= jQuery('script').last().data('player-height') || 100			;
var playerWidth			= jQuery('script').last().data('player-width') || 400			;
var playerWaveColor		= jQuery('script').last().data('player-wave-color') || 'Violet'		;
var playerProgressColor		= jQuery('script').last().data('player-progress-color') || 'Purple'	;
var playerBackgroundColor	= jQuery('script').last().data('player-background-color') || ''		;
var playerHideScrollBar		= jQuery('script').last().data('player-hide-scroll-bar') || true	;

	// global constants from the node server!
const port              = '20001'            ;
const proxyPort         = 'proxyPort20001'     	;
const spinner		= '/html5Audio/html5AudioNode/images/spinner.gif'		;

const buttonHeight	= 42 			;
const controlHeight	= 20			;


const	waveSurferVersion	=	'7.6.0'				;	// 2023-12-29
const	unpkgPrefix		=	'//unpkg.com/wavesurfer.js@' 	;	// 2023-12-29
const	unpkgDistUrl		=	unpkgPrefix				// 2023-12-29
				+	waveSurferVersion			// 2023-12-29
				+	'/dist/'				// 2023-12-29
				;						// 2023-12-29

		// 2023-06-11 - latest websurfer
		// 2023-08-27 - had to roll back
						//	var waveSurferUrl		=	'//unpkg.com/wavesurfer.js@beta'				;
						//	2023-12-29	const waveSurferUr	='//unpkg.com/wavesurfer.js@7.1.5/dist/wavesurfer.esm.js'	;
						//

const waveSurferUrl		=	unpkgDistUrl				// 2023-12-29
				+	'wavesurfer.esm.js'			// 2023-12-29
				;						// 2023-12-29

					//	var waveSurferTimelineUrl='//unpkg.com/wavesurfer.js@beta/dist/plugins/timeline.js'	;

const waveSurferTimelineUrl	=	unpkgDistUrl				// 2023-12-29
				+	'plugins/timeline.esm.js'		// 2023-12-29
				;						// 2023-12-29

var globalWaveSurferObj		=	null								;

var wavesurfer;

var globalTimelinePlugin	=	null								;

let innerText = `
    import ws			from '${waveSurferUrl}'			;
    globalWaveSurferObj		= ws					;
    import wsTlPlugin		from '${waveSurferTimelineUrl}'		;
    globalTimelinePlugin	= wsTlPlugin				;
`;

let script		= document.createElement('script')		;
script.type		= 'module'					;
Object.assign(script,  { innerText } )					; // fancy way of assigning this object a value!
document.head.appendChild(script);



const slashCharTwice			= String.fromCharCode(47,47)		;
const comptonDomainName			= 'comptonpeslonline.com'		;
				// 2024-02-08	const jqwidgetsDomainName		= 'jqwidgets.com/jquery-widgets-demo/'	;

				// 2023-06-10	const waveSurferJsLib			= '//unpkg.com/wavesurfer@1.3.4/dist/wavesurfer.min.js';
				// 2023-06-10	const waveSurferJsTimelineLib		= '//unpkg.com/wavesurfer@1.3.4/dist/plugin/wavesurfer.timeline.min.js'	;

				//	2024-02-08	const jqWidgetsJsLib			= '/js/jqwidgets/'			;
				//	2024-02-08	const jqWidgetsCssLib			= '/css/jqwidgets/'			;
				//
const	jqwidgetsVersion		=	'18.0.0'			;	// 2024-02-08
const	jqWidgetsJsLib			=	'/js/jquery/jqwidgets/'			// 2024-02-08
					+	jqwidgetsVersion			// 2024-02-08
					+	'/jqwidgets-min/'		;	// 2024-02-08

const	jqWidgetsCssLib			=	'/js/jquery/jqwidgets/'			// 2024-02-08
					+	jqwidgetsVersion			// 2024-02-08
					+	'/jqwidgets/styles/'		;	// 2024-02-08

	// global variables
var globalAudioFile		= null			;

	// load up css and js
[	jqWidgetsCssLib + 'jqx.base.css'
										//	2023-06-11 unused,	'/js/Modernizr/Modernizr.custom.81162.js'
,	slashCharTwice + comptonDomainName + '/' + proxyPort + '/socket.io/socket.io.js'

										//	2023-06-10	, waveSurferJsLib
										//	2023-06-10	, waveSurferJsTimelineLib	// 2021-03-22
,	jqWidgetsJsLib + 'jqxcore.js'
,	jqWidgetsJsLib + 'jqxbuttons.js'
,	jqWidgetsJsLib + 'jqxscrollbar.js'
,	jqWidgetsJsLib + 'jqxlistbox.js'
,	jqWidgetsJsLib + 'jqxdropdownlist.js'

].forEach( (value, key) =>	{
	if  ( value.match(/\.css$/) )	{
		var headID	= document.getElementsByTagName("head")[0]	;
		var cssNode	= document.createElement('link')		;
		cssNode.href	= value						;
		cssNode.type	= 'text/css'					;
		cssNode.rel	= 'stylesheet'					;
		cssNode.media	= 'screen'					;
		headID.appendChild(cssNode)					;
		console.info('Loading: ' + value)				;
	} else if  ( value.match(/\.js$/) )	{
		var script	= document.createElement('script')		;
		script.src	= value						;
		script.type	= 'text/javascript'				;
		script.async	= false						;
		var scripts	= document.getElementsByTagName('script')[0]	;
		console.info('Loading: ' + value)				;
		scripts.parentNode.insertBefore(script, scripts)		;
		//	head.appendChild(script); ????????????????????????
	} else {
		console.error('what is ' + value );
	}
});


var wrapper = document.createElement('div');
innerHTML = `
	<div id='waveSurferContainer' style='margin:0px; border:0px; padding:0px;'>
		<div id='waveFormDiv' style='height: __HEIGHT__px; width: __WIDTH__px; margin:0px; border:0px; padding:0px;'>
			<!-- this stuff will all be cleared out when player loads-->
			<div id='tempDiv'>
				Player will load soon.
			</div>
		</div>
		<div style='margin-right: 20px; margin-top: 10px; float:left;' class='controls'>
			<button class='btn btn-primary' data-action='back'>
				<i class='glyphicon glyphicon-step-backward'></i>
				Backward
			</button>
			<button class='btn btn-primary' data-action='play'>
				<i class='glyphicon glyphicon-play'></i>
				Play / <i class='glyphicon glyphicon-pause'></i> Pause
			</button>
			<button class='btn btn-primary' data-action='forth'>
				<i class='glyphicon glyphicon-step-forward'></i>
				Forward
			</button>
			<div style='margin-left: 10px; float: right;' id='jqxDropDownListDiv'>&nbsp;</div>
		</div>
	</div>
`	.replace(/__HEIGHT__/g		,	playerHeight - controlHeight	)
	.replace(/__WIDTH__/g		,	playerWidth			)
	.replace(/__SPINNER_URL__/	,	spinner				)
	.trim()
	;

Object.assign(wrapper,  {innerHTML } );

document.currentScript.after(wrapper);

document.querySelector('div#tempDiv').style.backgroundSize	= 'cover';
document.querySelector('div#tempDiv').style.display	= 'table-cell';
document.querySelector('div#tempDiv').style.textAlign	= 'center';
document.querySelector('div#tempDiv').style.height	= playerHeight;
document.querySelector('div#tempDiv').innerText		= 'Player should load soon!';


document.querySelector('div#waveSurferContainer').setAttribute('style', 'background-image: url(/html5Audio/html5AudioNode/images/spinner.gif); ');
document.querySelector('div#waveSurferContainer').style.backgroundRepeat	= 'no-repeat'			;
document.querySelector('div#waveSurferContainer').style.backgroundSize		= '100px 100px'			;
document.querySelector('div#waveSurferContainer').style.setProperty('background-position'	, 'center'		)		;
document.querySelector('div#waveSurferContainer').style.setProperty('height'			, playerHeight	+ 'px'	)		;
document.querySelector('div#waveSurferContainer').style.setProperty('width'			, playerWidth	+ 'px'	)		;
document.querySelector('div#waveSurferContainer').style.setProperty('background-color'		, playerBackgroundColor	)		;


								//jQuery('div#waveSurferContainer').css(
									//{ 'height'		: playerHeight
									//, 'width'		: playerWidth
									//, 'background-color'	: playerBackgroundColor
									//}
								//);

	// https://stackoverflow.com/questions/7486309/how-to-make-script-execution-wait-until-jquery-is-loaded
var waitForWaveSurfer = setInterval( () => {
	if  ( typeof globalWaveSurferObj === 'function' )	{
		console.info('globalWaveSurferObj is finally now a function! proceeding....');
		document.querySelector('div#waveSurferContainer').style.backgroundImage	= null		;
		document.querySelector('div#waveFormDiv').replaceChildren()	;	// empty out the loading message

						//jQuery('div#waveFormDiv').css('maxWidth', playerWidth + 'px') ;

		wavesurfer = globalWaveSurferObj.create(
			{	'backend'	:	'MediaElement'
			,	'container'	:	document.querySelector('div#waveFormDiv')
			,	'height'	:	( playerHeight - buttonHeight )
			,	'hideScrollbar'	:	playerHideScrollBar
			,	'progressColor'	:	playerProgressColor
			,	'waveColor'	:	playerWaveColor
			}
		);
		wavesurfer.registerPlugin(globalTimelinePlugin.create());

  						// 2023-06-11		url: 'https://wavesurfer-js.org//wavesurfer-code/examples/audio/audio.wav',
						// 2023-06-11			globalWaveSurferObj = WaveSurfer.create(
						// 2023-06-11				{	backend		:	'MediaElement'
						// 2023-06-11				,	container	:	document.querySelector('div#waveFormDiv')
						// 2023-06-11				,	height		:	( playerHeight - buttonHeight )
						// 2023-06-11				,	hideScrollbar	:	playerHideScrollBar
						// 2023-06-11				,	progressColor	:	playerProgressColor
						// 2023-06-11				,	waveColor	:	playerWaveColor
						// 2023-06-11				}
						// 2023-06-11			);
						// 2023-06-11	

		wavesurfer.once('ready', () => {
			console.info('Ready to play !');
					//		if  ( loadOpusAudioFile.playerAutoplay	)	{
					//			wavesurfer.play()		;
					//			console.info (new Date() + ' -- Initiating autoplay')	;
					//		} else {
					//			console.info (new Date() + ' -- Skipping autoplay')	;
					//		}
		});

		if (wavesurfer.enableDragSelection) {
			wavesurfer.enableDragSelection({
				color: 'rgba(0, 255, 0, 0.1)'
			});
		}

		document.addEventListener('keydown', function (e) {
			var map =
				{	32	: 'play'
				,	37	: 'back'
				,	39	: 'forth'
				};
			var action = map[e.keyCode];
			if (action in GLOBAL_ACTIONS) {
				if (document == e.target || document.body == e.target) {
					e.preventDefault();
				}
				GLOBAL_ACTIONS[action](e);
			}
		});

		var GLOBAL_ACTIONS = {
			'play': function () {
				wavesurfer.playPause();
			},
			'back': function () {
				wavesurfer.skip(-2);
			},
			'forth': function () {
				wavesurfer.skip(2);
			},
			'toggle-mute': function () {
				wavesurfer.toggleMute();
			}
		};

		[].forEach.call(document.querySelectorAll('[data-action]'), function (el) {
			el.addEventListener('click', function (e) {
				var action = e.currentTarget.dataset.action;
				if (action in GLOBAL_ACTIONS) {
					e.preventDefault();
					GLOBAL_ACTIONS[action](e);
				}
			});
		});
		clearInterval(waitForWaveSurfer);
	}
}, 10);


var socket;

var loadIoSetTimeout = setInterval( () => {
	if  ( typeof io === 'function' )	{
		console.info('io is finally now a function! proceeding....');
													// 2020-02-14 globalSocketObject = io(proxyPort);
			// https://socket.io/docs/client-api/#With-custom-path
			// https://socket.io/docs/client-api/#With-websocket-transport-only

		socket												// 2020-02-15
			= io.connect	(	'/'								// 2020-02-15
						,	{	'path'		: '/' + proxyPort + '/socket.io'	// 2021-03-31 - added extra slash
						,	'timeout'	: 50000					// 2020-02-18	increased from default 20000 to 50000
						,	'transports'	: ['polling']				// 2020-02-15	added transport polling
						}								// 2020-02-15
					);									// 2020-02-15
		socket.on ('Server 2 Client Message', (messageFromServer) =>	{
			console.info ('Server said: ' + messageFromServer);
		});
		clearInterval(loadIoSetTimeout);
	}
}, 10);


var jqxDropDownListSetTimeout = setInterval( () => {
	if ( typeof jQuery().jqxDropDownList === 'function' ) {
		console.info('jQuery().jqxDropDownlist is finally now a function!  Creating jqxDropDownList.');

		jQuery('.btn-primary').css({'height' : controlHeight});
		jQuery('div#jqxDropDownListDiv').jqxDropDownList(
			{ source			: ['mp3', 'ogg', 'wav' ]
			, disabled			: false
			, dropDownWidth			: 42
			, enableBrowserBoundsDetection	: true
			, autoDropDownHeight		: true
			, theme				: 'energyblue'
			, placeHolder			: 'Download'
			, height			: controlHeight
			, width				: '90px'
			}
		);
		jQuery('div#jqxDropDownListDiv').on('select', function (event)
			{
											// 2017-02-03 if ( args && globalAudioFile )
				if	(	(	globalAudioFile					)
					&&	(	typeof event			===	'object'	)
					&&	(	typeof event.args		===	'object'	)
					&&	(	typeof event.args.index		===	'number'	)
					&&	(	event.args.index		>=	0		)
					&&	(	typeof event.args.item		===	'object'	)
					&&	(	typeof event.args.item.value	===	'string'	)
					&&	(	event.args.item.value		!=	null		)
					)
				{
								// 2017-02-03 var args = event.args;
								// 2017-02-03 var index = event.args.index				;
					var item = event.args.item				;
					var convertAudioFormatVar = ''
						+ '/'								// 2021-03-27 added forward slash
						+ proxyPort							// 2020-02-11
						+ '/convertAudioFormat/'
						+ item.value
						+ '/?inputFile='
						+ globalAudioFile				;
					console.info(convertAudioFormatVar)			;
					if  ( navigator.userAgent.search('Chrome')	)	{		// 2017-02-03
						// chrome!
						window.location.assign(convertAudioFormatVar)		;
					} else {								// 2017-02-03
						// firefox??							// 2017-02-03
						window.open(convertAudioFormatVar, '_blank'	)	;	// 2017-02-03
					}
				}
				jQuery("div#jqxDropDownListDiv").jqxDropDownList('selectIndex', -1 );
			});
		clearInterval(jqxDropDownListSetTimeout);
	}
},10);

								//loadOpusAudioFile.playerAutoplay	= null	;
								//function loadOpusAudioFile(thisAudioFile, playerAutoplay)	
function loadOpusAudioFile(thisAudioFile)	{
	globalAudioFile	= thisAudioFile.replace(/\/+/g, '/')			;	// remove the double-slashes
								//	if  ( typeof playerAutoplay !== 'boolean' )	{
								//		loadOpusAudioFile.playerAutoplay	= true			;
								//	} else {
								//		loadOpusAudioFile.playerAutoplay	= playerAutoplay	;
								//	}
	console.info('Attempting to play: ' + globalAudioFile )		;

	wavesurfer.stop();
	setTimeout( () => { wavesurfer.empty()			}	, 200	)	;
	setTimeout( () => ( wavesurfer.seekTo(0)		) 	, 400	)	;	// do we really need this ????
	setTimeout( () => { wavesurfer.load(globalAudioFile)	}	, 600	)	;

						// wavesurfer.play();
						// 2023-06-11	wavesurfer.options.url  = thisAudioFile;
						// 2023-06-11	wavesurfer.setOptions({'url': globalAudioFile});
}