

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Smart Network
</title>
    <script type="text/javascript" language="javascript">
        var n = 10
	var path = new Array(20)
	var serv = new Array(20)
	var maxserv = 100
	var maxpath = 100
	var avgpathtotal
	var avgservtotal
	var avgbothtotal
	var avgrandtotal
	var trials = 0
	var graphcanvas
	var graph

        function doinitialload()
        {
            graphcanvas = document.getElementById('graphcanvas');
            graph = graphcanvas.getContext('2d');

            graph.lineWidth = 1;
            graph.strokeStyle = "White"

            doreset();
        }

	function chartdata(stime,ttime)
		{
		var x

	x = (trials%300)*5
	graph.strokeStyle = '#40E0D0'
        graph.beginPath();
        graph.moveTo(x,200-Math.round(stime));
        graph.lineTo(x, 200);
        graph.stroke();

	graph.strokeStyle = '#FFCC00'
        graph.beginPath();
        graph.moveTo(x+2,200-Math.round(ttime));
        graph.lineTo(x+2, 200);
        graph.stroke();
		}

	function resetcanvas()
	{
	graph.canvas.width = 10
        graph.canvas.height = 10
	graph.canvas.width = 1510
        graph.canvas.height = 200
	}

	function doreset()
	{

	resetcanvas()


	document.getElementById("thestep").innerHTML =   "0"
	trials = 0
	document.getElementById("avgserv").innerHTML =   "TBD"
	avgservtotal = 0
	document.getElementById("avgpath").innerHTML =   "TBD"
	avgpathtotal = 0
	document.getElementById("avgboth").innerHTML =   "TBD"
	avgbothtotal = 0
	document.getElementById("avgrand").innerHTML =   "TBD"
	avgrandtotal = 0


	for (i=0; i<n; i++)
		{
			document.getElementById("serv" + i).style.width = Math.round(maxserv*2) + "px"
			document.getElementById("serv" + i).title = "Server " + i
			document.getElementById("serv" + i).style.visibility = "visible"
			document.getElementById("path" + i).style.width =  Math.round(maxpath*2) + "px"
			document.getElementById("path" + i).title = "Path " + i
			document.getElementById("path" + i).style.left =   (600 - Math.round(maxpath*2)) + "px"
			document.getElementById("path" + i).style.visibility = "visible"
			document.getElementById("label" + i).innerHTML =   ""
		}
	for (i=n; i<20; i++)
		{
		document.getElementById("serv" + i).style.visibility = "hidden"
		document.getElementById("path" + i).style.visibility = "hidden"
		}
	if(n==20)
		{
		document.getElementById("addoption").style.visibility = "hidden"
		}
	else
		{
		document.getElementById("addoption").style.visibility = "visible"
		}
	
	if(n==1)
		{
		document.getElementById("suboption").style.visibility = "hidden"
		}
	else
		{
		document.getElementById("suboption").style.visibility = "visible"
		}
	
	if(maxpath==100)
		{
		document.getElementById("addmaxpath").style.visibility = "hidden"
		}
	else
		{
		document.getElementById("addmaxpath").style.visibility = "visible"
		}
	
	if(maxpath==5)
		{
		document.getElementById("submaxpath").style.visibility = "hidden"
		}
	else
		{
		document.getElementById("submaxpath").style.visibility = "visible"
		}
	
	if(maxserv==100)
		{
		document.getElementById("addmaxserv").style.visibility = "hidden"
		}
	else
		{
		document.getElementById("addmaxserv").style.visibility = "visible"
		}
	
	if(maxserv==5)
		{
		document.getElementById("submaxserv").style.visibility = "hidden"
		}
	else
		{
		document.getElementById("submaxserv").style.visibility = "visible"
		}
	}

	function addoption()
		{
		if(n<20)
			{
			n+=1
			document.getElementById("optionslabel").innerHTML = n
			}
		doreset()
		}

	function suboption()
		{
		if(n>1)
			{
			n-=1
			document.getElementById("optionslabel").innerHTML = n
			}
		doreset()
		}

	function addmaxpath()
		{
		if(maxpath<100)
			{
			maxpath += 5
			document.getElementById("maxpathlabel").innerHTML = maxpath
			}
		doreset()
		}

	function submaxpath()
		{
		if(maxpath>5)
			{
			maxpath -= 5
			document.getElementById("maxpathlabel").innerHTML = maxpath
			}
		doreset()
		}

	function addmaxserv()
		{
		if(maxserv<100)
			{
			maxserv += 5
			document.getElementById("maxservlabel").innerHTML = maxserv
			}
		doreset()
		}

	function submaxserv()
		{
		if(maxserv>5)
			{
			maxserv -= 5
			document.getElementById("maxservlabel").innerHTML = maxserv
			}
		doreset()
		}


        function dotrials(numtrials) {
            var i


            for (i = 0; i < numtrials; i++) {
                doatrial()
            }
		document.getElementById("thestep").innerHTML = trials
            
        }

        function doatrial() {
	    var i

		var fastestserv
		var fastestservtime
		var fastestpath
		var fastestpathtime
		var fastesttotal
		var fastesttotaltime
		var randtotaltime
		var randindex

		trials = trials + 1

		if(trials%300==1)
			{
			resetcanvas()
			}


		for (i=0; i<n; i++)
			{
			path[i] = Math.random() * maxpath
			
			serv[i] = Math.random() * maxserv
			document.getElementById("serv" + i).style.width = Math.round(serv[i]*2) + "px"
			document.getElementById("serv" + i).title = serv[i]
			document.getElementById("path" + i).style.width =  Math.round(path[i]*2) + "px"
			document.getElementById("path" + i).title = path[i]
			document.getElementById("path" + i).style.left =   (600 - Math.round(path[i]*2)) + "px"
			document.getElementById("label" + i).innerHTML =   ""
			}


	fastestserv = 0
	fastestservtime = serv[0]
	fastestpath = 0
	fastestpathtime = path[0]
	fastesttotal = 0
	fastesttotaltime = serv[0] + path[0]


	for (i=1; i<n; i++)
	{

	if(serv[i] < fastestservtime)
		{
		fastestservtime = serv[i]
		fastestserv = i
		}
	if(path[i] < fastestpathtime)
		{
		fastestpathtime = path[i]
		fastestpath = i
		}
	if((serv[i] + path[i]) < fastesttotaltime )
		{
		fastesttotaltime  = serv[i] + path[i]
		fastesttotal = i
		}
	}

	chartdata(serv[fastestserv] + path[fastestserv], serv[fastesttotal] + path[fastesttotal])


	randindex = -1
	while((randindex<0) || (randindex > (n-1)))
		{
		randindex = Math.round(Math.random()*(n+3)-2)
		}
	
	document.getElementById("label" + fastestserv).innerHTML =  "Fastest Server; "
	document.getElementById("label" + fastestpath).innerHTML = document.getElementById("label" + fastestpath).innerHTML + "Fastest Path; "
	document.getElementById("label" + fastesttotal).innerHTML = document.getElementById("label" + fastesttotal).innerHTML + "Fastest Total; "
	document.getElementById("label" + randindex).innerHTML = document.getElementById("label" + randindex).innerHTML + "Random Selection; "

	if (trials <= 1)
		{
		avgpathtotal = serv[fastestpath] + path[fastestpath]
		avgservtotal = serv[fastestserv] + path[fastestserv]
		avgbothtotal = serv[fastesttotal] + path[fastesttotal]
		avgrandtotal = serv[randindex] + path[randindex]
		}
	else
		{
		avgpathtotal = ((avgpathtotal * (trials - 1)) + serv[fastestpath] + path[fastestpath])/trials
		avgservtotal = ((avgservtotal * (trials - 1)) + serv[fastestserv] + path[fastestserv])/trials
		avgbothtotal = ((avgbothtotal * (trials - 1)) + serv[fastesttotal] + path[fastesttotal])/trials
		avgrandtotal = ((avgrandtotal * (trials - 1)) + serv[randindex] + path[randindex])/trials
		}

	document.getElementById("avgserv").innerHTML = avgservtotal
	document.getElementById("avgpath").innerHTML = avgpathtotal
	document.getElementById("avgboth").innerHTML = avgbothtotal
	document.getElementById("avgrand").innerHTML = avgrandtotal
}

</script>
</head>
<body onload="doinitialload();" vlink=#FFFFFF alink=#FFFFFF link=#FFFFFF bgcolor="Black" style="color:White;  font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none;">
    


    
    <div>
<a href="Default.aspx">ComplexModels.com Home</a>
<br /><br />
<a href="NetworkOptionsHelp.htm" target="_blank">Smart Network Help.htm</a>
<table   width="220px" cellpadding="10px" cellspacing="10px">
<tr><td  style="background-color:#202020;">
<b>SPECIFY INPUTS</b></td></tr>
<tr><td style="background-color:Gray">
        Options: <span id="optionslabel">10</span>
<span id="addoption" onclick="addoption();"><u>More</u></span>
<span id="suboption" onclick="suboption();"><u>Less</u></span>
<br/>
Max Path: <span id="maxpathlabel">100</span>
<span id="addmaxpath" onclick="addmaxpath();"><u>More</u></span>
<span id="submaxpath" onclick="submaxpath();"><u>Less</u></span>
<br/>
Max Serv: <span id="maxservlabel">100</span>
<span id="addmaxserv" onclick="addmaxserv();"><u>More</u></span>
<span id="submaxserv" onclick="submaxserv();"><u>Less</u></span>
        
</td></tr>
    

<tr><td style="background-color:#202020;">
<b>RUN TRIALS</b>
</td></tr>
<tr><td style="background-color:Gray;">
<input id="Reset" onclick="doreset();" type="button" style="width:150px" value="Reset" />
<input id="Trial" onclick="dotrials(1);" type="button" style="width:150px" value="Do 1 Step" />
<input id="Trial10" onclick="dotrials(10);" type="button" style="width:150px" value="Do 10 Steps" />
<input id="Trial100" onclick="dotrials(100);" type="button" style="width:150px" value="Do 100 Steps" /> 
<input id="Trial1000" onclick="dotrials(1000);" type="button" style="width:150px" value="Do 1,000 Steps" />
<input id="Trial10000" onclick="dotrials(10000);" type="button" style="width:150px" value="Do 10,000 Steps" />
    
       </td></tr>

<tr><td style="background-color:#202020;">
<b>VIEW RESULTS</b>
</td></tr>
<tr><td style="background-color:Gray;">
Time Step: <span id="thestep">0</span>
<br /><br />
<span style="color:#40E0D0;">
Average Server-Based Total Time: 
</span>
<span id="avgserv" style="color:#40E0D0;">TBD</span>
<br /><br />
Average Path-Based Total Time: <span id="avgpath">TBD</span>
<br /><br />
Average Random Total Time: <span id="avgrand">TBD</span>
<br /><br />
<span style="color:#FFCC00;">
Average Global Optimum Total Time: 
</span>
<span id="avgboth" style="color:#FFCC00;">TBD</span>
</td></tr>
<tr><td style="background-color:Gray">
© 2013 Joe Weinman
</td></tr>
</table>

<div id="graphdiv" style="position:absolute; left:280px; top:30px; width:1510px; height:200px; background-color:#202020;">   
<canvas id="graphcanvas"></canvas>
<br/>
TRIAL RESULTS: <span style="color:#40E0D0;">Total Time Based on Best Server Time</span>&nbsp;&nbsp;<span style="color:Yellow;">Total Time Based on Best Combined Server + Network Time<span>
</div>

</div>
    <div style="position:absolute; left:540px; top: 275px; color: Blue;"><b>PATHS</b></div>
    <div style="position:absolute; left:620px; top: 275px; color: Green;"><b>SERVERS</b></div>
    
<div id="path0" style="position:absolute;  left:400px; width:200px; height:23px; top:300px; color:White; background-color:Blue;"></div>
<div id="path1" style="position:absolute;  left:400px; width:200px; height:23px; top:325px; color:White; background-color:Blue;"></div>
<div id="path2" style="position:absolute;  left:400px; width:200px; height:23px; top:350px; color:White; background-color:Blue;"></div>
<div id="path3" style="position:absolute;  left:400px; width:200px; height:23px; top:375px; color:White; background-color:Blue;"></div>
<div id="path4" style="position:absolute;  left:400px; width:200px; height:23px; top:400px; color:White; background-color:Blue;"></div>
<div id="path5" style="position:absolute;  left:400px; width:200px; height:23px; top:425px; color:White; background-color:Blue;"></div>
<div id="path6" style="position:absolute;  left:400px; width:200px; height:23px; top:450px; color:White; background-color:Blue;"></div>
<div id="path7" style="position:absolute;  left:400px; width:200px; height:23px; top:475px; color:White; background-color:Blue;"></div>
<div id="path8" style="position:absolute;  left:400px; width:200px; height:23px; top:500px; color:White; background-color:Blue;"></div>
<div id="path9" style="position:absolute;  left:400px; width:200px; height:23px; top:525px; color:White; background-color:Blue;"></div>
<div id="path10" style="position:absolute;  left:400px; width:200px; height:23px; top:550px; color:White; background-color:Blue;"></div>
<div id="path11" style="position:absolute;  left:400px; width:200px; height:23px; top:575px; color:White; background-color:Blue;"></div>
<div id="path12" style="position:absolute;  left:400px; width:200px; height:23px; top:600px; color:White; background-color:Blue;"></div>
<div id="path13" style="position:absolute;  left:400px; width:200px; height:23px; top:625px; color:White; background-color:Blue;"></div>
<div id="path14" style="position:absolute;  left:400px; width:200px; height:23px; top:650px; color:White; background-color:Blue;"></div>
<div id="path15" style="position:absolute;  left:400px; width:200px; height:23px; top:675px; color:White; background-color:Blue;"></div>
<div id="path16" style="position:absolute;  left:400px; width:200px; height:23px; top:700px; color:White; background-color:Blue;"></div>
<div id="path17" style="position:absolute;  left:400px; width:200px; height:23px; top:725px; color:White; background-color:Blue;"></div>
<div id="path18" style="position:absolute;  left:400px; width:200px; height:23px; top:750px; color:White; background-color:Blue;"></div>
<div id="path19" style="position:absolute;  left:400px; width:200px; height:23px; top:775px; color:White; background-color:Blue;"></div>


<div id="serv0" style="position:absolute;  left:620px; width:200px; height:23px; top:300px; color:White; background-color:Green;"></div>
<div id="serv1" style="position:absolute;  left:620px; width:200px; height:23px; top:325px; color:White; background-color:Green;"></div>
<div id="serv2" style="position:absolute;  left:620px; width:200px; height:23px; top:350px; color:White; background-color:Green;"></div>
<div id="serv3" style="position:absolute;  left:620px; width:200px; height:23px; top:375px; color:White; background-color:Green;"></div>
<div id="serv4" style="position:absolute;  left:620px; width:200px; height:23px; top:400px; color:White; background-color:Green;"></div>
<div id="serv5" style="position:absolute;  left:620px; width:200px; height:23px; top:425px; color:White; background-color:Green;"></div>
<div id="serv6" style="position:absolute;  left:620px; width:200px; height:23px; top:450px; color:White; background-color:Green;"></div>
<div id="serv7" style="position:absolute;  left:620px; width:200px; height:23px; top:475px; color:White; background-color:Green;"></div>
<div id="serv8" style="position:absolute;  left:620px; width:200px; height:23px; top:500px; color:White; background-color:Green;"></div>
<div id="serv9" style="position:absolute;  left:620px; width:200px; height:23px; top:525px; color:White; background-color:Green;"></div> 
<div id="serv10" style="position:absolute;  left:620px; width:200px; height:23px; top:550px; color:White; background-color:Green;"></div>
<div id="serv11" style="position:absolute;  left:620px; width:200px; height:23px; top:575px; color:White; background-color:Green;"></div>
<div id="serv12" style="position:absolute;  left:620px; width:200px; height:23px; top:600px; color:White; background-color:Green;"></div>
<div id="serv13" style="position:absolute;  left:620px; width:200px; height:23px; top:625px; color:White; background-color:Green;"></div>
<div id="serv14" style="position:absolute;  left:620px; width:200px; height:23px; top:650px; color:White; background-color:Green;"></div>
<div id="serv15" style="position:absolute;  left:620px; width:200px; height:23px; top:675px; color:White; background-color:Green;"></div>
<div id="serv16" style="position:absolute;  left:620px; width:200px; height:23px; top:700px; color:White; background-color:Green;"></div>
<div id="serv17" style="position:absolute;  left:620px; width:200px; height:23px; top:725px; color:White; background-color:Green;"></div>
<div id="serv18" style="position:absolute;  left:620px; width:200px; height:23px; top:750px; color:White; background-color:Green;"></div>
<div id="serv19" style="position:absolute;  left:620px; width:200px; height:23px; top:775px; color:White; background-color:Green;"></div>


<div id="label0" style="position:absolute;  left:850px; width:500px; height:23px; top:300px; color:White;"></div>
<div id="label1" style="position:absolute;  left:850px; width:500px; height:23px; top:325px; color:White;"></div>
<div id="label2" style="position:absolute;  left:850px; width:500px; height:23px; top:350px; color:White;"></div>
<div id="label3" style="position:absolute;  left:850px; width:500px; height:23px; top:375px; color:White;"></div>
<div id="label4" style="position:absolute;  left:850px; width:500px; height:23px; top:400px; color:White;"></div>
<div id="label5" style="position:absolute;  left:850px; width:500px; height:23px; top:425px; color:White;"></div>
<div id="label6" style="position:absolute;  left:850px; width:500px; height:23px; top:450px; color:White;"></div>
<div id="label7" style="position:absolute;  left:850px; width:500px; height:23px; top:475px; color:White;"></div>
<div id="label8" style="position:absolute;  left:850px; width:500px; height:23px; top:500px; color:White;"></div>
<div id="label9" style="position:absolute;  left:850px; width:500px; height:23px; top:525px; color:White;"></div> 
<div id="label10" style="position:absolute;  left:850px; width:500px; height:23px; top:550px; color:White;"></div>
<div id="label11" style="position:absolute;  left:850px; width:500px; height:23px; top:575px; color:White;"></div>
<div id="label12" style="position:absolute;  left:850px; width:500px; height:23px; top:600px; color:White;"></div>
<div id="label13" style="position:absolute;  left:850px; width:500px; height:23px; top:625px; color:White;"></div>
<div id="label14" style="position:absolute;  left:850px; width:500px; height:23px; top:650px; color:White;"></div>
<div id="label15" style="position:absolute;  left:850px; width:500px; height:23px; top:675px; color:White;"></div>
<div id="label16" style="position:absolute;  left:850px; width:500px; height:23px; top:700px; color:White;"></div>
<div id="label17" style="position:absolute;  left:850px; width:500px; height:23px; top:725px; color:White;"></div>
<div id="label18" style="position:absolute;  left:850px; width:500px; height:23px; top:750px; color:White;"></div>
<div id="label19" style="position:absolute;  left:850px; width:500px; height:23px; top:775px; color:White;"></div> 

</body>
</html>