<!DOCTYPE html>
<html>
    <head>
        <title>Speedtest</title>
        <style type="text/css">
            html,body{
                margin:0;
                padding:0;
                border:none;
                text-align:center;
            }
            #startBtn{
                display:inline-block;
                border:0.15em solid #000000;
                padding:0.3em 0.5em;
                margin:0.6em;
                color:#000000;
                text-decoration:none;
            }
			#ip{
				margin:0.8em 0;
				font-size:1.2em;
			}
			
			#chart1Area, #chart2Area{
				width:100%;
				max-width:30em;
				height:10em;
				display:block;
				margin:0 auto;
			}
        </style>
		<script src="example5_data/Chart.bundle.min.js"></script>
        <script type="text/javascript">
            var w=null;
            function runTest(){
				var chart1ctx=document.getElementById("chart1Area").getContext('2d'),
					chart2ctx=document.getElementById("chart2Area").getContext('2d');
				var dlDataset={
							label: "Download",
							fill: false,
							lineTension: 0.1,
							backgroundColor: "rgba(75,192,192,0.4)",
							borderColor: "rgba(75,192,192,1)",
							borderCapStyle: 'butt',
							borderDash: [],
							borderDashOffset: 0.0,
							borderJoinStyle: 'miter',
							pointBorderColor: "rgba(75,192,192,1)",
							pointBackgroundColor: "#fff",
							pointBorderWidth: 1,
							pointHoverRadius: 5,
							pointHoverBackgroundColor: "rgba(75,192,192,1)",
							pointHoverBorderColor: "rgba(220,220,220,1)",
							pointHoverBorderWidth: 2,
							pointRadius: 1,
							pointHitRadius: 10,
							data: [0],
							spanGaps: false,
						},
					ulDataset={
							label: "Upload",
							fill: false,
							lineTension: 0.1,
							backgroundColor: "rgba(192,192,75,0.4)",
							borderColor: "rgba(192,192,75,1)",
							borderCapStyle: 'butt',
							borderDash: [],
							borderDashOffset: 0.0,
							borderJoinStyle: 'miter',
							pointBorderColor: "rgba(192,192,75,1)",
							pointBackgroundColor: "#fff",
							pointBorderWidth: 1,
							pointHoverRadius: 5,
							pointHoverBackgroundColor: "rgba(192,192,75,1)",
							pointHoverBorderColor: "rgba(220,220,220,1)",
							pointHoverBorderWidth: 2,
							pointRadius: 1,
							pointHitRadius: 10,
							data: [0],
							spanGaps: false,
						},
					pingDataset={
							label: "Ping",
							fill: false,
							lineTension: 0.1,
							backgroundColor: "rgba(75,220,75,0.4)",
							borderColor: "rgba(75,220,75,1)",
							borderCapStyle: 'butt',
							borderDash: [],
							borderDashOffset: 0.0,
							borderJoinStyle: 'miter',
							pointBorderColor: "rgba(75,220,75,1)",
							pointBackgroundColor: "#fff",
							pointBorderWidth: 1,
							pointHoverRadius: 5,
							pointHoverBackgroundColor: "rgba(75,220,75,1)",
							pointHoverBorderColor: "rgba(220,220,220,1)",
							pointHoverBorderWidth: 2,
							pointRadius: 1,
							pointHitRadius: 10,
							data: [],
							spanGaps: false,
						},
					jitterDataset={
							label: "Jitter",
							fill: false,
							lineTension: 0.1,
							backgroundColor: "rgba(220,75,75,0.4)",
							borderColor: "rgba(220,75,75,1)",
							borderCapStyle: 'butt',
							borderDash: [],
							borderDashOffset: 0.0,
							borderJoinStyle: 'miter',
							pointBorderColor: "rgba(220,75,75,1)",
							pointBackgroundColor: "#fff",
							pointBorderWidth: 1,
							pointHoverRadius: 5,
							pointHoverBackgroundColor: "rgba(220,75,75,1)",
							pointHoverBorderColor: "rgba(220,220,220,1)",
							pointHoverBorderWidth: 2,
							pointRadius: 1,
							pointHitRadius: 10,
							data: [],
							spanGaps: false,
						}
						;
				var chart1Options={
					type: 'line',
					data: {
						datasets: [dlDataset,ulDataset]
					},
					options:{
						responsive: true,
						legend: {
							position: 'bottom',
						},
						scales: {
							xAxes: [{
									display: true,
									scaleLabel: {
										display: false,
									},
									ticks:{
										beginAtZero: true
									}
								}],
							yAxes: [{
									display: true,
									scaleLabel: "Speed",
									ticks:{
										beginAtZero: true
									}
								}]
						}
					}
				},
				chart2Options={
					type: 'line',
					data: {
						datasets: [pingDataset,jitterDataset]
					},
					options:{
						responsive: true,
						legend: {
							position: 'bottom',
						},
						scales: {
							xAxes: [{
									display: true,
									scaleLabel: {
										display: false,
									},
									ticks:{
										beginAtZero: true
									}
								}],
							yAxes: [{
									display: true,
									scaleLabel: "Latency",
									ticks:{
										beginAtZero: true
									}
								}]
						}
					}
				};		
				
				var chart1 = new Chart(chart1ctx, chart1Options),
					chart2 = new Chart(chart2ctx, chart2Options);
			
                document.getElementById("startBtn").style.display="none";
                document.getElementById("testArea").style.display="";
                document.getElementById("abortBtn").style.display="";
                w=new Worker("speedtest_worker.min.js");
                var interval=setInterval(function(){w.postMessage("status");}.bind(this),100);
                w.onmessage=function(event){
                    var data=event.data.split(";");
                    var status=Number(data[0]);
                    if(status>=4){
                        clearInterval(interval);
                        document.getElementById("abortBtn").style.display="none";
                        document.getElementById("startBtn").style.display="";
                        w=null;
                    }
                    if(status==5){ 
                        document.getElementById("testArea").style.display="none";
                    }
					if(status==1&&Number(data[1])>0){
						chart1.data.datasets[0].data.push(Number(data[1]));
						chart1.data.labels[chart1.data.datasets[0].data.length-1]="";
						chart1.update();
					}
					if(status==3&&Number(data[2])>0){
						chart1.data.datasets[1].data.push(Number(data[2]));
						chart1.data.labels[chart1.data.datasets[1].data.length-1]="";
						chart1.update();
					}
					if(status==2&&Number(data[3])>0){
						chart2.data.datasets[0].data.push(Number(data[3]));
						chart2.data.datasets[1].data.push(Number(data[5]));
						chart2.data.labels[chart2.data.datasets[0].data.length-1]="";
						chart2.data.labels[chart2.data.datasets[1].data.length-1]="";
						chart2.update();
					}
					ip.innerHTML=data[4];
                }.bind(this);
                w.postMessage("start");
            }
            function abortTest(){
                if(w)w.postMessage("abort");
            }
        </script>
    </head>
    <body>
        <h1>Speedtest</h1>
        <div id="testArea" style="display:none">
			<div id="ip">Please wait...</div>
			<h2>Speed</h2>
			<canvas id="chart1Area"></canvas>
			<h2>Latency</h2>
			<canvas id="chart2Area"></canvas>
            <br/>
            <a href="javascript:abortTest()" id="abortBtn">Abort</a>
        </div>
        <a href="javascript:runTest()" id="startBtn">Run speedtest</a>
		<br/><br/>
		Charts by <a href="http://www.chartjs.org/">Chart.js</a>
    </body>
</html>