<!DOCTYPE html>
<html>
    <head>
        <title>WebSocket demo</title>
        <link href="_style.css" rel="stylesheet">
        <link href="jquery-ui.min.css" rel="stylesheet">
		<meta charset="utf-8">
    </head>
    <body>
        
		<div id="pagestart">
			<p><span class="users">?</span> online</p>
			<h1>Raspberry Pi als DMX Webserver</h1>
			<i>Ein Laborprojekt für Netzwerk- und Bustechnik von Ida und Jens</i>
		</div>
		
		<div id="remote">
		<?php
			
			// start-channel?
			if ( !isset($_GET['start']) || $_GET['start'] < 1 || $_GET['start'] > 512 )
				$_GET['start'] = 1;
				
			// end-channel?
			if ( !isset($_GET['end']) || $_GET['end'] < 1 || $_GET['end'] > 512 )
				$_GET['end'] = 12;
				
			// zahlendreher?
			if ( $_GET['start'] > $_GET['end'] )
			{
				$end = $_GET['end'];
				$_GET['end'] = $_GET['start'];
				$_GET['start'] = $end;
				unset($end);
			}
				
			// erstmal slider bauen
			for ( 
				$i = $_GET['start']; 
				$i <= $_GET['end']; 
				$i++ 
			)
			{
				echo'
			<div class="faderblock">
				<b>Ch '. str_pad($i, 3, 0, STR_PAD_LEFT) .'</b>
				<input type="text" id="amount_'.$i.'" readonly style="border:0; color:#000; font-weight:bold;" value="0">
				<div id="slider_'.$i.'" class="slider"></div>
			</div>
';		
			};
		?>
		</div>
		
		  <button>Manual</button>
		
		
		<script src="external/jquery/jquery.js"></script>
		<script src="jquery-ui.min.js"></script>
		
		
		<script>
			// create websocket connection
			var wbsckt = new WebSocket("ws://<?php echo $_SERVER['SERVER_ADDR']; ?>:6789/");
		
			// einmal alle Werte abfragen
			
		
			wbsckt.onmessage = function (event) {
                console.log("Socket Input: " + event.data);
                daten = event.data.split(";");

                daten.forEach( function( teil ) 
                {
					teil = teil.split("=");

					// teil0 ist keine Zahl?
					key = Number(teil[0]);

					if ( isNaN(key) )				
					{
						switch(teil[0])
						{
							case 'users':
								// Anzahl Benutzer ausgeben
								document.querySelector('.users').textContent = (
									teil[1].toString() + " user" + (teil[1] == 1 ? "" : "s")
								);


								document.querySelector('#remote').style.display = 'block';
								
								console.log("Now online: " + teil[1] );
							break;
						}
					}
					else if ( key >= <?php echo $_GET['start']; ?> && key <= <?php echo $_GET['end']; ?>)
					{
						console.log("DMX value for channel " + teil[0] + " is now at " + teil[1]);
						$( function() { 
							$( "#amount_" + teil[0] ).val( teil[1].toString() ); 
							$( "#slider_" + teil[0] ).slider( "value", teil[1] );
						});
					}
				});

            };
		
			$( function() {
				// slider mit Funktion belegen
				<?php
					for ( 
						$i = $_GET['start']; 
						$i <= $_GET['end']; 
						$i++ 
					)
					{
						echo'
				$( "#slider_'.$i.'" ).slider({
					orientation: "vertical",
					min: 0,
					max: 255,
					//create: function() {
					//	$( "#amount_'.$i.'" ).text( "0" );
					//},
					slide: function( event, ui ) {
						//$( "#amount_'.$i.'" ).val( ui.value );						// WS will set value of amount
						wbsckt.send("'.$i.'=" + ui.value);
						console.log("Try to set '.$i.'=" + ui.value);
					}
				});
				
				//$( "#amount_'.$i.'" ).val( $( "#slider_'.$i.'" ).slider( "value" ) );

';		
					};
				?>

				$( "button" ).click( function( event ) {
					wbsckt.send("manual=1");
				} );
			} );
		</script>
		

    </body>
</html>