<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<!-- *************************************************************************

	Das Textausgabefenster ist ein externes Fenster, in dem in einer
	Textarea, die berechneten Werte in Tabellenform geordnet ausgegeben
	werden.
	Bei der Ausgabe sind folgende Funktionen möglich:
	________________________________________
	
			-	Beenden der Ausgabe und Fenster Schliessen
			-	Pausieren der Datenausgabe
			-	Fortführen der pausierten Datenausgabe
			-	Kopieren des gesamten Textes im Fenster
			-	Teilweises markieren von Text
			-	Kopieren des von Hand markierten Textes
			-	Starten/Stoppen der grafischen Ausgabe der Sonnen/
				Mondbahn Animation
				
			-	Finish output and Close window
			-	Pause the data output
			-	Continue the paused data output
			-	Copy the entire text in the window
			-	Partial marking of text
			-	Copy the text marked by hand
			-	Start/stop the graphical output of the suns/
				Moon Track Animation
	

****************************************************************************** -->

	<head>

		<title>[Mondphasen Animation]</title>
		
		<!-- 
			Veranlassen dass diese HTML-Datei in jedem Fall 
			von der Originaladresse geladen wird (expires = fällig werden).
			Make this HTML file in any case 
			is loaded from the original address (expires = due).
		-->
		<meta http-equiv="expires" content="0">
		<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="pragma" content="no-cache" />
		
		<style>
		
			/* ******************************
			 * ID des Body Tag Schriftfarbe
			 * und Hintergrundfarbe.
			 * ID of the body tag font color
			 * and background color.
			 *******************************/
			#b {
				background-color: #293133;
				color: #eadebd;
				border: 0px solid red;
			}
			
			/* ******************************
			 * ID der Tabelle.
			 * ID of the table.
			 *******************************/
			#t {
				border: 0px solid;
				border-right-color: #eadebd;
				border-left-color: #eadebd;
				border-top-color: #eadebd;
				border-bottom-color: #eadebd;
				width: 932px;
			}
		
			/* ******************************
			 * Name des Textausgabefeldes.
			 * Name of the text output field.
			 *******************************/
			textarea {
				font-family: Tahoma, sans-serif;
				font-size: 11px;
				width: 930px;
				height: 600px;
				Background: #eadebd;
				overflow: scroll;
			}
			
			/* ******************************
			 * ID der Spalten mit Buttons.
			 * ID of columns with buttons.
			 *******************************/
			.button {
				text-align: center;
				width: 155px;
			}
			
			/* ******************************
			 * ID Button Stop, Bild Laden.
			 * ID Button Stop, Image Load.
			 *******************************/
			#stop {
				background-position: absolute;
				background-image: url("./Images/Stopp_35x35.PNG");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button Stop, Maus darüber.
			 * ID Button Stop, mouse over it.
			 *******************************/
			#stop:hover{
				background-position: absolute;
				background-image: url("./Images/Stopp_35x35_hover.PNG");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button Start, Bild Laden.
			 * ID button Start, Image Load.
			 *******************************/
			#start {
				background-position: absolute;
				background-image: url("./Images/Play_35x35.PNG");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button Start, Maus darüber.
			 * ID button Start, mouse over it.
			 *******************************/
			#start:hover{
				background-position: absolute;
				background-image: url("./Images/Play_35x35_hover.PNG");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button Pause, Bild Laden.
			 * ID Button Pause, Image Load.
			 *******************************/
			#hold {
				background-position: absolute;
				background-image: url("./Images/Hold_35x35.PNG");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button Pause, Maus darüber.
			 * ID button pause, mouse over it.
			 *******************************/
			#hold:hover{
				background-position: absolute;
				background-image: url("./Images/Hold_35x35_hover.PNG");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button Alles Markieren.
			 * ID Button Select All.
			 *******************************/
			#markAll {
				background-position: absolute;
				background-image: url("./Images/Book-Mark-All_35x35.png");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button Alles Markieren,
			 * Maus darüber.
			 * ID Button Mark All,
			 * Mouse over it.
			 *******************************/
			#markAll:hover{
				background-position: absolute;
				background-image: url("./Images/Book-Mark-All_hover_35x35.png");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button teilweise Markieren.
			 * ID button partially mark.
			 *******************************/
			#markPart {
				background-position: absolute;
				background-image: url("./Images/Book-Mark_35x35.png");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button teilweise Markieren,
			 * Maus darüber.
			* ID button partially mark,
			 * Mouse over it.
			 *******************************/
			#markPart:hover{
				background-position: absolute;
				background-image: url("./Images/Book-Mark_hover_35x35.png");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button Kopieren.
			 * ID Button Copy.
			 *******************************/
			#copy {
				background-position: absolute;
				background-image: url("./Images/Copy_35x35.png");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			/* ******************************
			 * ID Button Kopieren,
			 * Maus darüber.
			 * ID Button Copy,
			 * Mouse over it.
			 *******************************/
			#copy:hover{
				background-position: absolute;
				background-image: url("./Images/Copy_hover_35x35.png");
				border: 1px solid #eadebd;
				border-radius: 8px;
				width: 35px;
				height: 35px;
			}
			
			
			/* ******************************
			 * ID der Statusbar links für den
			 * aktuellen Status.
			 * ID of the status bar on the left for the
			 * current status.
			 *******************************/
			#status {
				width: 420px;
				background-color: lightgray;
				color: red;
			}
			
			/* ******************************
			 * ID der Statusbar rechts für die
			 * Anzahl der empfangenen Datensätze.
			 * ID of the status bar right for the
			 * Number of records received.
			 *******************************/
			#statusReceived {
				width: 402px;
				background-color: lightgray;
				color: red;
			}
			
			/* ******************************
			 * ID den Tableheader (th).
			 * ID is the tableheader (th).
			 *******************************/
			#th {
				font-size: 18px;
			}
			
			/* ******************************
			 * ID der Copyrightzeile.
			 * ID of the copyright line.
			 *******************************/
			#copyrights {
				width: 100%;
				color: #eadebd;
				padding: 2px;
			}
			
			/* ******************************
			 * ID der Radiobuttons zur Mond-
			 * phasenanimation.
			 * ID of the radio buttons to the moon
			 * phase animation.
			 *******************************/
			#radioPhase {
				text-align: center;
			}
			
		</style>
		
		<!-- *************************************************************************

			Hier wird das aktuelle jQuery Script, aus dem Netz, mit eingebunden.
			Ist bei der Verwendung unter Wordpress nicht notwendig, da dort schon
			vorhanden.
			Here the current jQuery script, from the net, is integrated.
			Is not necessary when using under Wordpress, since there already
			available.

		****************************************************************************** -->
		<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
		
		<script>
			// Mit der Ausführung warten bis DOM geladen ist.
			// Wait until DOM is loaded.
			document.addEventListener("DOMContentLoaded", function(event) {
				// Alles geladen inklusive Bilder.
				// Funktioniert nicht alleine: DOM muss vorher geleden sein und danach erst
				// der Windows Event Load.
				// All loaded including pictures.
				// Doesn’t work alone: DOM must be checked before and only afterwards
				// the Windows Event Load.
				window.addEventListener("load", function(){
					// Array für Datensätze die beim Anhalten der
					// Ausgabe sonst verloren gehen könnten.
					// Array for records that occur when the
					// Output might otherwise be lost.
					var storedRecords = [];
					// Array für die empfangenen Daten [key=value].
					// Array for the received data [key=value].
					var splitData = [];
					// Objekt des Ausgabefensters (Textarea).
					// Object of the output window (Textarea).
					var ta = document.getElementById("dataOutput");
					// Objekt des Startbuttons.
					// Object of the start button.
					var objStart = document.getElementById("start");
					// Objekt des Stopbuttons.
					// Object of the stop button.
					var objStop = document.getElementById("stop");
					// Objekt des Pausebuttons.
					// Object of the pause button.
					var objHold = document.getElementById("hold");
					
					// Objekt des Alles Markierenbuttons.					
					var objMarkAll = document.getElementById("markAll");
					// Objekt des teilweise Markierenbuttons.
					// Object of the partial mark button.
					var objMarkPart = document.getElementById("markPart");
					// Objekt des Kopierenbuttons.
					// Object of the copy button.
					var objCopy = document.getElementById("copy");
					// Objekt des Body's mit dem Fokus darauf.
					// Object of the body with the focus on it.
					var b = document.getElementById("b");
					b.focus();
					// Objekt der linken Statusbar für die Anzeigen von
					// Text.
					// Object of the left status bar for displaying
					// Text.
					var objStatus = document.getElementById("status");
					// Objekt der rechten Statusbar für die Anzeigen von
					// der Anzahl der ausgegebenen Datensätze.
					// Object of the right status bar for displaying
					// the number of output records.
					var objStatusReceived = document.getElementById("statusReceived");
					// Zähler der empfangenen Datensätze.
					// Counter of the received records.
					var countReceived = 0;
					// Variable, die anzeigt das die Ausgabe der empfangenen
					// Daten unterbrochen wurde.
					// Variable that indicates the output of the received
					// Data was interrupted.
					var isStopped = false;
					
					/* ******************************************************************
					 * Eventhandler für das Schliessen des Browserfensters, kurz
					 * bevor es geschlossen wird.
					 * Die Standardaktion = Schliesen des Fensters wird verhindert. Dazu
					 * muss aber mindestens eine Aktion mit dem Fenster passiet sein. Z. B.
					 * Klicken in den Body.
					 *
					 * Er gilt für mehrere Browsertypen. Getestet mit IE 11, Edge, Chrome
					 * Opera und Firefox.
					 * 
					 * Event handler for closing the browser window, short
					 * before it closes.
					 * The default action = Window closing is prevented. To this end
					 * but there must be at least one action with the window passiet. For example.
					 * Click into the body.
					 *
					 * It applies to several browser types. Tested with IE 11, Edge, Chrome
					 * Opera and Firefox.
					 ****************************************************************** */
					window.addEventListener("unload",  function (event){
							// Die Standardaktion = Schliessen des Fensters nur auslösen,
							// solange noch keine Daten empfangen wurden.
							// Activate the default action = close the window only,
							// as long as no data has been received yet.
							if (isStopped == false){
								if (!event) event = window.event;
								// Ist die Funktion vorhanden? ... dann führe sie aus
								// Is the function available? ... then execute them
								if (event.preventDefault()) {
									// Cancel the event
									// If you prevent default behavior in Mozilla Firefox prompt will always be shown
									event.stopPropagation().preventDefault(); 
								// ... ansonsten Returnwert setzen und Standardaktion verhindern ...
								// ... otherwise set return value and prevent default action ...
								}else{
									// Chrome requires returnValue to be set
									event.returnValue = false;
									return (event.returnValue);
								}
							
							}

					});
					// Event Handler für "Alles Markieren" in der Datenausgabe.
					//
					objMarkAll.addEventListener("click",  function (){
							// Status ausgeben ...
							objStatus.value = "Kopiert den gesamten Inhalt des Textfensters in die Zwischenablage!";
							// ... und wenn der "Pause" Button gedrückt wurde und keine Daten
							// mehr in das Ausgabefenster geschrieben werden ...
							// ... and if the “Pause” button has been pressed and no data is available
							// more can be written to the output window ...
							if (objHold.disabled == true){
								ta.disabled = false;							// Textfeld editierbar machen - Make text field editable.
								ta.focus();											// ... Textfenster im Focus - Text window in the Focus
								ta.select();										// ... dann markieren den gesamten Text - then mark the entire text
								document.execCommand('copy');	// ... und den Text in die Zwischenablage kopieren - and copy the text to the clipboard
								ta.selectionStart = ta.selectionEnd;	// ... Markierten Text wieder demarkieren  - Demarcate selected text again
								ta.disabled = true;							// ... Textfeld nicht mehr editierbar - Text field no longer editable
							}
						
					});
					
					// Event Handler für "Teilweise Markieren" in der Datenausgabe.
					// Event handler for “partial marking” in the data output.
					objMarkPart.addEventListener("click",  function (){
							// Status ausgeben ...
							// Show status ...
							objStatus.value = "Wahlweise Text zum Kopieren Markieren!";
							// ... und wenn der "Pause" Button gedrückt wurde und keine Daten
							// mehr in das Ausgabefenster geschrieben werden ...
							// ... and if the “Pause” button has been pressed and no data is available
							// more can be written to the output window ...
							if (objHold.disabled == true){
								ta.disabled = false;			// Textfeld editierbar machen - Make text field editable.
								ta.focus();							// ... Textfenster im Focus - Text window in the Focus
								objCopy.disabled = false	// ... und Kopieren Button enablen - Copy button enabled
							}
						
					});
					// Event Handler für "Kopieren" des markierten Texts der Datenausgabe.
					// Event Handler for “Copy” the marked text of the data output.
					objCopy.addEventListener("click",  function (){
							// Status ausgeben ...
							// Show status ...
							objStatus.value = "Kopiert dem markierten Inhalt im Textfensters in die Zwischenablage!";
							// ... und wenn der "Pause" Button gedrückt wurde und keine Daten
							// mehr in das Ausgabefenster geschrieben werden ...
							// ... and if the “Pause” button has been pressed and no data is available
							// more can be written to the output window ...
							if (objHold.disabled == true){
								console.log("Pause gedrückt");
								ta.disabled = false;						// Textfeld editierbar machen - Make text field editable.
								document.execCommand('copy');// ... und den Text in die Zwischenablage kopieren.
																					// ... and copy the text to the clipboard.
							}
						
					});

					// Event Handler für die Pause in der Datenausgabe.
					// Event handler for the pause in the data output.
					objHold.addEventListener("click",  function (){
							// Die Funktionsbuttons je nach Bedingung Aktivieren oder
							// Deaktivieren.
							objHold.disabled = true;			// Pause Button Deaktivieren - Deactivate pause button
							objStart.disabled = false;			// Start Button Aktivieren - Deactivate start button
							objMarkAll.disabled = false;		// Alles Markieren Button Aktivieren - Activate mark all button
							objMarkPart.disabled = false;	// Teilweise Markieren Button Aktivieren - Partially Mark Button Activate
							objCopy.disbaled = false;		// Kopieren Button Aktivieren - Activate copy button
							// Status in der Statuszeile ausgeben ...
							// Display status in status line ...
							objStatus.value = "Datenausgabe angehalten! Es gehen Datensätze verloren!";
							// ... und Schalter für die Pause auf Wahr setzen.
							// ... and set the break button to True.
							isStopped = true;
						
					});
					// Event Handler des Buttons "Stop". Er Beendet das Ausgabefenster.
					// Event handler of the “Stop” button. It closes the output window.
					objStop.addEventListener("click",  function (){
						// Die Funktionsbuttons je nach Bedingung Aktivieren oder
						// Deaktivieren.
						// Activate the function buttons depending on the condition or
						// Deactivate.
						objHold.disabled = true;			// Pause Button Deaktivieren - Pause button deactivate.
						objStart.disabled = true;			// Start Button Deaktivieren - Start button deaktivate.
						objMarkAll.disabled = true;		// Alles Markieren Button Deaktivieren - Marc all button deaktivate.
						objMarkPart.disabled = true;	// Teilweise Markieren Button Deaktivieren - Partially marc button deactivate.
						objCopy.disbaled = true;			// Kopieren Button Deaktivieren - Copy button deactivate.
						// ... Frage aber vorher noch einmal nach ob wirklich beendet werden soll ...
						// ... But first ask again if it really should be terminated ...
						if ( window.confirm("Möchten Sie die Datenausgabe wirklich Beenden?") == true ){
							// Schalter auf "Stop" für den Datenempfang setzen.
							// Set the switch to “Stop” for data reception.
							isStopped = true;
							// ... und sende es an den Background Worker, der daraufhin nichts mehr an das
							// Ausgabefenster sendet.
							// ... and send it to the background worker, who then no longer sends it to the
							// Output window sends.
							channelExtern.postMessage("Cancel");
						// Status, wenn nicht gestoppt wird, in der Statuszeile ausgeben.
						// State, if not stopped, in the status line.
						}else
							objStatus.value = "Empfange Daten!";
						
					});
					// Event Handler des Buttons "Start". Die Ausgabe der Daten geht weiter.
					// Event handler of the button “Start.” The output of the data continues.
					objStart.addEventListener("click",  function (){
						objStart.disabled = true;			// Start Button Deaktivieren - Start button deactivate.
						objHold.disabled = false;			// Pause Button Aktivieren - Pause button deactivate.
						objMarkAll.disabled = true;		// Alles Markieren Button Deaktivieren - Marc all button deactivate.
						objMarkPart.disabled = true;	// Teilweise Markieren Button Deaktivieren - Partially marc button deactivate.
						objCopy.disabled = true;			// Kopieren Button Deaktivieren - Copy button deactivate.
						// Wenn im Sicherungsarray nichts enthalten ist ...
						// If there is nothing in the backup array ...
						if (storedRecords.length == 0){
							// Status Aktualisieren ...
							// Update Status ...
							objStatus.value = "Empfange Daten!";
						// ... ansonsten schreibe erst einmal die zwischengespeicherten Daten
						// in das Textfeld.
						// ... otherwise write the cached data
						// in the text field.
						}else{
							// Statusmeldung ausgeben.
							// Display status message.
							objStatus.value = "Restauriere zwischengespeicherte Daten aus dem Array!";
							// Durchlaufe das Array von 0 ... n ...
							// Run the array from 0 ... n ...
							for (var i = 0; i < storedRecords.length; i++){
								// ... hänge es an das Textfeld an -  . . . attach it to the text field.
								ta.value += storedRecords[i];
								// Textarea nach unten scrollen, so wie Datensätze eingetragen
								// werden.
								// Scroll down text area, just like records entered
								//.
								ta.scrollTop = ta.scrollHeight;
							}
							// Speicherarray löschen.
							// Delete memory array.
							storedRecords = [];
						}
						// ... und Variable auf "Nicht gestoppt" setzen.
						// ... and set variable to “Unstopped.”
						isStopped = false;

					});
					// Erstellt einen neuen Kommunikationskanal über den die berechneten
					// Daten vom Background Worker an dieses Fenster gesendet werden.
					// Creates a new communication channel through which the calculated
					// Data from the Background Worker can be sent to this window.
					var channelExtern = new BroadcastChannel("comExtern");
					// Status Aktualisieren.
					// Update Status.
					if (channelExtern) 
						objStatus.value = "Verbindungskanal eingerichtet! Bereit zum Empfang!";
					else
						objStatus.value = "Konnte Verbindungskanal nicht einrichten! Kein Empfang!";
					// Event Handler (Message Queue) für die vom Background Worker gesendeten Daten.
					// Event Handler (Message Queue) for the data sent by the background worker.
					channelExtern.onmessage = function (event){
						var p = null;
						// Im Array splitData findet man zwei Werte als Key=Value.
						// Sie sind durch "=" getrennt.
						// In the splitData array you find two values as Key=Value.
						// They are separated by “=.”
						splitData = event.data.split("=");
						// Daten Ausgeben, nur wenn nicht gestoppt ist ...
						// Output data, only if not stopped ...
						if (isStopped == false){
							// Wenn dies für mich bestimmt ist ...
							// If this is meant for me ...
							if (splitData[0] == "dataOutput"){
								// Die Buttons "hold" und "start" aktivieren.
								// Activate the buttons “hold” and “start.”
								objStart.disabled = false;
								objHold.disabled = false;
								// Status Aktualisieren.
								// Update status.
								objStatus.value = "Empfange Daten!"
								// ... hänge es an das Textfeld an.
								// ... attach it to the text field.
								ta.value += splitData[1] + '\n';
								// Textarea nach unten scrollen, so wie Datensätze eingetragen
								// werden.
								// Scroll down text area, just like records entered.
								ta.scrollTop = ta.scrollHeight;
								// Den Zähler Erhöhen und in Statusbar Anzeigen.
								// Increase the counter and Show in Statusbar.
								countReceived++;
								objStatusReceived.value = LPad(countReceived, 9, "0");
							// Das Objekt des Fensters wird ...
							// The object of the window will be ...
							}else if (splitData[0] == "Popup"){
								p = object(popup);
							// ... zum Schliessen benötigt.
							// ... needed to close.
							}else if (splitData[0] == "Cancel"){
								p.close();
							}// End of if (splitData[0] == "dataOutput")
						// ... und wenn gestoppt, dann in Array speichern.
						// ... and if stopped, then save to array.
						}else{
							// Wenn dies für mich bestimmt ist ...
							// If this is meant for me ...
							if (splitData[0] == "dataOutput"){
								// ... an das Array anhängen.
								// ... append to the array.
								storedRecords.push(splitData[1] + '\n');
								// Den Zähler Erhöhen und in Statusbar Anzeigen.
								// Increase the counter and Show in Statusbar.
								countReceived++;
								objStatusReceived.value = LPad(countReceived, 9, "0");
								objStatus.value = "Speichere empfangene Daten in Array!";
							}
						}// End of if (isStopped == false)
						
					}// End of channelExtern.onmessage = function (event)
					
					
					
					/* ******************************************************
						Die Funktion füllt eine Zeichenketten mit Zahl vorne
						mit n-Zeichen auf.
						Z.B. 1 -> 01
						izahl 				= 		Die Zahl ohne führende Nullen
						ianzStellen 		= 	Die gewünschte Anzahl von Stellen
						sFuelzeichen 	=	Das gewünschet führende Zeichen
						
						Rückgabewert 	=	Z.B. "01" oder "0001"
						____________________________________
						The function fills a string with number in front
						with n-signs.
						E.g. 1 -> 01
						izahl 				=   The number without leading zeros
						ianzPlaces 		=  The desired number of posts
						sFuelmark 		= The desired leading character
						
						Return value 	= e.g. “01” or “0001”
					   *************************************************** */
					function LPad( iZahl, iAnzStellen, sFuellzeichen )
					{
						var sZahl = iZahl + "";
						while( sZahl.length < iAnzStellen )
							sZahl = sFuellzeichen + sZahl;
						return sZahl;
						
					}// End of LPad()
					
					
					// Wartefunktion die verwendet werden kann.
					// Die Funktion, in der sie verwendet wird muss vom Typ async sein:
					//
					// async function myFunction(){....}
					//
					// Waiting function that can be used.
					// The function in which it is used must be of type async:
					//
					// async function myFunction () {....}
					function Sleep(milliseconds) {
					 return (new Promise(resolve => setTimeout(resolve, milliseconds)));
					}// End of Sleep()

					// Test event Handler ...
					var objFoo = document.getElementById("foo");
					objFoo.addEventListener("click", async function (){
						await Sleep(100);
					});
					// Feuert einen Event ab, wie z.B. den Klick in den Body
					// oder auf einen Button. Passiert hier beim laden des
					// Dokuments durch Aufruf der Funktion 
					// eventFire(document.getElementById('foo'), 'click');//
					// Fire off an event, such as the click into the body
					// or on a button. Happens here while loading the
					// Documents by calling the function 
					// eventFire (document.getElementById (’foo'), ’click');
					function eventFire(el, etype){
						if (el.fireEvent) {
							el.fireEvent('on' + etype);
						} else {
							var evObj = document.createEvent('Events');
							evObj.initEvent(etype, true, false);
							var canceled = el.dispatchEvent(evObj);
							if (canceled) {
								// A handler called preventDefault.
								console.log("automatic click canceled");
							} else {
								  // None of the handlers called preventDefault.
								  console.log("automatic click not canceled");
							} 
						}
						
					}// End of eventFire(document.getElementById('foo'), 'click');
					// Klicke virtuell einen unsichtbaren Button und in das Browserfenster ...
					// Click virtually an invisible button and in the browser window ...
					eventFire(document.getElementById('dataOutput'), 'click');
					eventFire(document.getElementById('foo'), 'click');
				}); // Ende alles geladen - End all loaded
			}); // Ende DOM geladen - End of DOM loaded
			
		</script>
		
	</head>
	
<body id="b">
		<!-- Ausgabetabelle der berechneten Werte -->
		<!-- Output table of calculated values -->
		<table id="t">
			<th colspan="6"><span id="th"><u>Datenausgabe:</span></u></th>
			<!-- *************************************************************************

				Der Textausgabebereich, der alle berechneten Daten untereinander,
				nach der aktuellen Zeit, ausgibt.
				
				The text output area, which contains all the calculated data among each other,
				according to the current time, outputs.

			****************************************************************************** -->
			<tr>
					<td colspan="6" width="100%">
						<textarea  id="dataOutput" wrap="soft"  readonly="readonly" disabled></textarea>
					</td>
			</tr>
			
			<!-- *************************************************************************

				Der darunter befindliche Buttonbereich für die Operationen während
				der Datenausgabe, wie anhalten und weiterspulen ... Selbsterklärend.
				
				The button area below for operations during
				data output, how to stop and rewind ... Self-explanatory.

			****************************************************************************** -->
			
			<tr>
					<td class="button"  >
						<input type="button" title="Beendet die Ausgabe und schließt das Fenster" id="stop"></input>
					</td>
					<td class="button">
						<input type="button"  title="Pause der Ausgabe. Datensätze gehen verloren!"  id="hold" disabled="disabled"></input>
					</td>
					<td class="button" >
						<input type="button"  title="Startet die Ausgabe wieder" id="start"  disabled="disabled"></input>
					</td>
					<td  class="button" >
						<input type="button"  title="Kopiert den gesamten Inhalt des Textfensters in die Zwischenablage!" id="markAll"  disabled="disabled"></input>
					</td>
					<td  class="button" >
						<input type="button"  title="Wahlweise Text zum Kopieren Markieren" id="markPart" disabled="disabled"></input>
					</td>
					<td class="button">
						<input type="button"  title="Kopiert den markierten Text in die Zwischenablage" id="copy"  disabled="disabled"></input>
					</td>
			</tr>
			<!-- *************************************************************************

				Unsichtbarer, virtueller Button, auf den über einen abgefeuerten
				Event geklickt wird. Es wird ein Mausklick simuliert. Funktioniert
				aber nicht immer. Wohl Timeing Probleme der Event Handler.
				
				Invisible, virtual button, on the via a fired
				Event is clicked. A mouse click is simulated. Works
				but not always. Probably timeing problems of the event handler.

			****************************************************************************** -->
			<tr>
				<td class="button" colspan="6">
					<input type="button"  id="foo" style="visibility: hidden;" disabled="disabled"></input>
				</td>
			</tr>
			
			<!-- *************************************************************************

				Radio Buttons zum Starten und Beenden der Mond/Sonne Animation.
				
				Radio buttons to start and stop the Moon/Sun animation.

			****************************************************************************** -->
			
			<tr>
					<td id="radioPhase"  colspan="3">
						<label title="Startet die Mondpasenanimation">Sonne/Mondphasen Animation Starten:</label><input type="radio" title="Startet die Mondpasenanimation" id="moonPaseStart" disabled="disabled"></input>
					</td>
					<td id="radioPhase"  colspan="3">
						<label title="Beendet die Mondpasenanimation">Sonne/Mondphasen Animation Beenden:</label><input type="radio" title="Beendet die Mondpasenanimation" id="moonPhaseEnd" disabled="disabled"></input>
					</td>
			</tr>
			<tr>
				<td colspn="6"> </td>
			</tr>
			
			<!-- *************************************************************************

				Status Anzeigeleiste. Status display bar.

			****************************************************************************** -->
			
			<tr>
					<td class="text"  colspan="6">
						<label>Status:</label><input type="text" title="Aktueller Status" id="status" readonly disabled></input>
						<label>Anzahl:</label><input type="text" title="Anzahl der Empfangenen Datensätze" id="statusReceived" readonly disabled></input>
					</td>
			</tr>
		</table>
		
		<div id="copyrights">
			Icons erstellt von <a id="copyrights" target="_blank" href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a>
			from <a id="copyrights" target="_blank"  href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
		</div>
		
</body>

</html>