<head>
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:400,700" rel="stylesheet">
	<link href='../style.css' rel='stylesheet' type='text/css'>
	<title>CenterValues Results</title>
	<link rel="icon" type="x-icon" href="hardicon.png">
	<link rel="shortcut icon" type="x-icon" href="hardicon.png">
	<meta charset="utf-8">
	<script>
	  version = "Test Edition #1"
	</script>
	</head>
	<script type="application/javascript"
	        src="../ideologies.js"> // Will it work if there are more axes tho
	</script>
	
	<body>
	<h1>CenterValues</h1>
	<hr>
	
	<h1>Results</h1>
	
	<h2>Theoretic Axis: <span class="weight-300" id="Theoretic-label"></span></h2>
	<div class="axis">
	    <img id="img-axes" src="../value-images/IconAxes.png" height="128pt"/>
	    <div class="bar axes" id="bar-axes"><div class="text-wrapper" id="axes"></div></div>
	    <div class="bar horseshoe" id="bar-horseshoe"><div class="text-wrapper" id="horseshoe"></div></div>
	    <img id="img-horseshoe" src="../value-images/IconSame.png" height="128pt"/>
	</div>
	<h2>Beliefal Axis: <span class="weight-300" id="Beliefal-label"></span></h2>
	<div class="axis">
	    <img id="img-moderate" src="../value-images/IconMod.png" height="128pt"/>
	    <div class="bar moderate" id="bar-moderate"><div class="text-wrapper" id="moderate"></div></div>
	    <div class="bar radical" id="bar-radical"><div class="text-wrapper" id="radical"></div></div>
	    <img id="img-radical" src="../value-images/IconRad.png" height="128pt"/>
	</div>
	<h2>Politic Axis: <span class="weight-300" id="Politic-label"></span></h2>
	<div class="axis">
	    <img id="img-political" src="../value-images/IconPol.png" height="128pt"/>
	    <div class="bar political" id="bar-political"><div class="text-wrapper" id="political"></div></div>
	    <div class="bar apolitical" id="bar-apolitical"><div class="text-wrapper" id="apolitical"></div></div>
	    <img id="img-apolitical" src="../value-images/IconApol.png" height="128pt"/>
	</div>
	<h2>Coordinatic Axis: <span class="weight-300" id="Coordinatic-label"></span></h2>
	<div class="axis">
	    <img id="img-dead" src="../value-images/IconDead.png" height="128pt"/>
	    <div class="bar dead" id="bar-dead"><div class="text-wrapper" id="dead"></div></div>
	    <div class="bar leaning" id="bar-leaning"><div class="text-wrapper" id="leaning"></div></div>
	    <img id="img-leaning" src="../value-images/IconLean.png" height="128pt"/>
	</div>
        <h2>Wing Axis: <span class="weight-300" id="Wing-label"></span></h2>
	<div class="axis">
	    <img id="img-leftist" src="../value-images/IconLeft.png" height="128pt"/>
	    <div class="bar leftist" id="bar-leftist"><div class="text-wrapper" id="leftist"></div></div>
	    <div class="bar rightist" id="bar-rightist"><div class="text-wrapper" id="rightist"></div></div>
	    <img id="img-rightist" src="../value-images/IconRite.png" height="128pt"/>
	</div>
  	<h2>Govermental Axis: <span class="weight-300" id="Govermental-label"></span></h2>
	<div class="axis">
	    <img id="img-statist" src="../value-images/IconUp.png" height="128pt"/>
	    <div class="bar statist" id="bar-statist"><div class="text-wrapper" id="statist"></div></div>
	    <div class="bar liberal" id="bar-liberal"><div class="text-wrapper" id="liberal"></div></div>
	    <img id="img-liberal" src="../value-images/IconDown.png" height="128pt"/>
	</div>
	<h2>Diagonal Axis: <span class="weight-300" id="Diagonal-label"></span></h2>
	<div class="axis">
	    <img id="img-anfash" src="../value-images/IconAnfa.png" height="128pt"/>
	    <div class="bar anfash" id="bar-anfash"><div class="text-wrapper" id="anfash"></div></div>
	    <div class="bar capcom" id="bar-capcom"><div class="text-wrapper" id="capcom"></div></div>
	    <img id="img-capcom" src="../value-images/IconCpcm.png" height="128pt"/>
	</div>
  	<h2>Food Preference Axis: <span class="weight-300" id="Food-label"></span></h2>
	<div class="axis">
	    <img id="img-vegan" src="../value-images/IconVeg.png" height="128pt"/>
	    <div class="bar vegan" id="bar-vegan"><div class="text-wrapper" id="vegan"></div></div>
	    <div class="bar meat" id="bar-meat"><div class="text-wrapper" id="meat"></div></div>
	    <img id="img-meat" src="../value-images/IconMeat.png" height="128pt"/>
	</div>
    	<h2>Healthiness Axis: <span class="weight-300" id="Healthiness-label"></span></h2>
	<div class="axis">
	    <img id="img-healthy" src="../value-images/IconHeal.png" height="128pt"/>
	    <div class="bar healthy" id="bar-healthy"><div class="text-wrapper" id="healthy"></div></div>
	    <div class="bar junk" id="bar-junk"><div class="text-wrapper" id="junk"></div></div>
	    <img id="img-junk" src="../value-images/IconJunk.png" height="128pt"/>
	</div>
      <h2>Smartness Axis: <span class="weight-300" id="Smartness-label"></span></h2>
	<div class="axis">
	    <img id="img-smart" src="../value-images/IconSmrt.png" height="128pt"/>
	    <div class="bar smart" id="bar-smart"><div class="text-wrapper" id="smart"></div></div>
	    <div class="bar strong" id="bar-strong"><div class="text-wrapper" id="strong"></div></div>
	    <img id="img-strong" src="../value-images/IconStrn.png" height="128pt"/>
	</div>
      <h2>Speed Axis: <span class="weight-300" id="Speed-label"></span></h2>
	<div class="axis">
	    <img id="img-fast" src="../value-images/IconFast.png" height="128pt"/>
	    <div class="bar fast" id="bar-fast"><div class="text-wrapper" id="fast"></div></div>
	    <div class="bar patient" id="bar-patient"><div class="text-wrapper" id="patient"></div></div>
	    <img id="img-patient" src="../value-images/IconSlow.png" height="128pt"/>
	</div>
	<h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
	<p>Ideological matching is a work in progress, and is even less accurate than the values and axes.</p>
	<hr/>
	<img src="" id="banner">
	<button class="button" onclick="location.href='../index.html';" style="background-color: #2196f3;">Back</button> <br>
	<!-- Website visit statistics - no personal information is collected! -->
	<script type="text/javascript">
	var sc_project=11325211;
	var sc_invisible=1;
	var sc_security="fd9f0659";
	var scJsHost = (("https:" == document.location.protocol) ?
	"https://secure." : "http://www.");
	document.write("<sc"+"ript type='text/javascript' src='" +
	scJsHost+
	"statcounter.com/counter/counter.js'></"+"script>");
	</script>
	<noscript><div class="statcounter"><a title="web stats"
	href="http://statcounter.com/" target="_blank"><img
	class="statcounter"
	src="//c.statcounter.com/11325211/0/fd9f0659/1/" alt="web
	stats"></a></div></noscript>
	<script>
	    function getQueryVariable(variable)
	    {
	           var query = window.location.search.substring(1)
	           var vars = query.split("&")
	           for (var i=0;i<vars.length;i++) {
	                   var pair = vars[i].split("=")
	                   if(pair[0] == variable) {return pair[1]}
	           }
	           return(NaN);
	    }
	
	    function setBarValue(name, value) {
	        innerel = document.getElementById(name)
	        outerel = document.getElementById("bar-" + name)
	        outerel.style.width = (value + "%")
	        innerel.innerHTML = (value + "%")
	        if (innerel.offsetWidth + 20 > outerel.offsetWidth) {
	            innerel.style.visibility = "hidden"
	        }
	    }
	
	    therArray = ["Even Jreg is afraid","100axes Theorist","9axes Theorist","Political Compass Theorist","Single Axis Theory","Horseshoe Theorist","Donut Theorist","Everyone's stupid but me","Reached the truth"]
	    belfArray = ["Extreme Moderacy","Spineless","Anti-Radical","Cute","Overtonic","Semi-Radical","Radical","Every Extreme","Unreal"]
	    polcArray = ["Based","Politician","Serious","Educated","Medium-rare","Unflaired","Apolitical","Griller","Post-political"]
	    cordArray = ["Heavenly","Requiem","Dead","Balanced","The 0.5","Slightly Leaning","Edgy","Extremist","Off-compass"]
            wingArray = ["Communalist","Sinistral","Communist","Socialist","Fucking guess","Conservative","Capitalist","Dextral","Darwinist"]
            govtArray = ["Ingsoc","Totalitarian","Authoritarian","Upwards leaning","AuthLib","Downwards leaning","Minarchist","Anarchist","Egoist"]
            diagArray = ["Tumblrist","Anfash Gang","Anarcho-Monarchist","Democrat","Undiagonal","Philantropist","Chinese Communist","Capcom Gang","Hive-Mind Avaritionist"]
            voreArray = ["Photosynthesis","Vegan","Veganist","Veggie-lover","Omnivore","Hot Dogs","Meat-Eater","Raw Meat-Eater","Cannibal"]
            helfArray = ["Superhuman","Very Healthy","Healthy","Almost Healthy","Slightly Unhealthy","Unhealthy","Very Unhealthy","Diseased","Walking Corpse"]
            smrtArray = ["Megamind","Understands Rick&Morty","Very Smart","Smart","Basic","Athletic","Strong","Bodybuilder","Titan"]
            spedArray = ["Accelerationist","Superspeed","Fast","Normal Speed","Slow","Lazy","Frozen","Petrified","Stopped Thinking"]
	
	    function setLabel(val,ary) {
	        if (val > 100) { return ary[0] } else
	        if (val > 90) { return ary[1] } else
	        if (val > 75) { return ary[2] } else
	        if (val > 60) { return ary[3] } else
	        if (val >= 40) { return ary[4] } else
	        if (val >= 25) { return ary[5] } else
	        if (val >= 10) { return ary[6] } else
	        if (val >= 0) { return ary[7] } else
	        	{return ary[8]}
	    }
	
	    axes  = getQueryVariable("a")
	    moderate     = getQueryVariable("l")
	    political   = getQueryVariable("b")
	    dead  = getQueryVariable("m")
            leftist  = getQueryVariable("c")
	    statist     = getQueryVariable("d")
	    anfash  = getQueryVariable("o")
	    vegan   = getQueryVariable("e")
	    healthy  = getQueryVariable("f")
            smart   = getQueryVariable("g")
	    fast  = getQueryVariable("n")
	    horseshoe    = (100 - axes).toFixed(1)
	    radical  = (100 - moderate).toFixed(1)
	    apolitical = (100 - political).toFixed(1)
	    leaning = (100 - dead).toFixed(1)
            rightist    = (100 - leftist).toFixed(1)
	    liberal  = (100 - statist).toFixed(1)
	    capcom  = (100 - anfash).toFixed(1)
	    meat = (100 - vegan).toFixed(1)
	    junk = (100 - healthy).toFixed(1)
            strong = (100 - smart).toFixed(1)
	    patient = (100 - fast).toFixed(1)
	
	    setBarValue("axes", axes)
	    setBarValue("horseshoe", horseshoe)
	    setBarValue("radical", radical)
	    setBarValue("moderate", moderate)
	    setBarValue("political", political)
	    setBarValue("apolitical", apolitical)
	    setBarValue("leaning", leaning)
	    setBarValue("dead", dead)
            setBarValue("leftist", leftist)
	    setBarValue("rightist", rightist)
	    setBarValue("statist", statist)
	    setBarValue("liberal", liberal)
	    setBarValue("anfash", anfash)
	    setBarValue("capcom", capcom)
	    setBarValue("vegan", vegan)
	    setBarValue("meat", meat)
	    setBarValue("healthy", healthy)
	    setBarValue("junk", junk)
            setBarValue("smart", smart)
	    setBarValue("strong", strong)
	    setBarValue("fast", fast)
	    setBarValue("patient", patient)
	
	    document.getElementById("Theoretic-label").innerHTML = setLabel(axes, therArray)
	    document.getElementById("Beliefal-label").innerHTML = setLabel(moderate, belfArray)
	    document.getElementById("Politic-label").innerHTML = setLabel(political, polcArray)
	    document.getElementById("Coordinatic-label").innerHTML = setLabel(dead, cordArray)
            document.getElementById("Wing-label").innerHTML = setLabel(leftist, wingArray)
	    document.getElementById("Govermental-label").innerHTML = setLabel(statist, govtArray)
	    document.getElementById("Diagonal-label").innerHTML = setLabel(anfash, diagArray)
	    document.getElementById("Food-label").innerHTML = setLabel(vegan, voreArray)
	    document.getElementById("Healthiness-label").innerHTML = setLabel(healthy, helfArray)
   	    document.getElementById("Smartness-label").innerHTML = setLabel(smart, smrtArray)
	    document.getElementById("Speed-label").innerHTML = setLabel(fast, spedArray)
	
	    ideology = ""
	    ideodist = Infinity
	    for (var i = 0; i < ideologies.length; i++) {
	        dist = 0
	        dist += Math.pow(Math.abs(ideologies[i].stats.ther - axes), 2)
	        dist += Math.pow(Math.abs(ideologies[i].stats.belf - moderate), 2)
	        dist += Math.pow(Math.abs(ideologies[i].stats.polc - political), 2)
	        dist += Math.pow(Math.abs(ideologies[i].stats.cord - dead), 2)
	        if (dist < ideodist) {
	            ideology = ideologies[i].name
	            ideodist = dist
	        }
	    }
	    document.getElementById("ideology-label").innerHTML = ideology
	
	    	    function createImage(src, x, y, w, h) {
	        img = new Image ()
	        img.src = src
	        img.onLoad = function() {
	            ctx.drawImage(img, x, y, w, h)
	        }
	    }
	
	    window.onload = function() {
	        var c = document.createElement("canvas")
	        var ctx = c.getContext("2d")
	        c.width = 800;
	        c.height = 1490;
	        ctx.fillStyle = "#EEEEEE"
	        ctx.fillRect(0,0,800,1490);
	
	        img = document.getElementById("img-axes")
	        ctx.drawImage(img, 20, 170, 100, 100);
	        img = document.getElementById("img-horseshoe")
	        ctx.drawImage(img, 680, 170, 100, 100)
	        img = document.getElementById("img-moderate")
	        ctx.drawImage(img, 20, 290, 100, 100)
	        img = document.getElementById("img-radical")
	        ctx.drawImage(img, 680, 290, 100, 100)
	        img = document.getElementById("img-political")
	        ctx.drawImage(img, 20, 410, 100, 100)
	        img = document.getElementById("img-apolitical")
	        ctx.drawImage(img, 680, 410, 100, 100)
	        img = document.getElementById("img-dead")
	        ctx.drawImage(img, 20, 530, 100, 100)
	        img = document.getElementById("img-leaning")
	        ctx.drawImage(img, 680, 530, 100, 100)
		img = document.getElementById("img-leftist")
	        ctx.drawImage(img, 20, 650, 100, 100)
	        img = document.getElementById("img-rightist")
	        ctx.drawImage(img, 680, 650, 100, 100)
		img = document.getElementById("img-statist")
	        ctx.drawImage(img, 20, 770, 100, 100)
	        img = document.getElementById("img-liberal")
	        ctx.drawImage(img, 680, 770, 100, 100)
		img = document.getElementById("img-anfash")
	        ctx.drawImage(img, 20, 890, 100, 100)
		img = document.getElementById("img-capcom")
	        ctx.drawImage(img, 680, 890, 100, 100)
	        img = document.getElementById("img-vegan")
	        ctx.drawImage(img, 20, 1010, 100, 100)
	        img = document.getElementById("img-meat")
	        ctx.drawImage(img, 680, 1010, 100, 100)
	        img = document.getElementById("img-healthy")
	        ctx.drawImage(img, 20, 1130, 100, 100)
	        img = document.getElementById("img-junk")
	        ctx.drawImage(img, 680, 1130, 100, 100)
                img = document.getElementById("img-smart")
	        ctx.drawImage(img, 20, 1250, 100, 100)
	        img = document.getElementById("img-strong")
	        ctx.drawImage(img, 680, 1250, 100, 100)
		img = document.getElementById("img-fast")
	        ctx.drawImage(img, 20, 1370, 100, 100)
	        img = document.getElementById("img-patient")
	        ctx.drawImage(img, 680, 1370, 100, 100)
	
	        ctx.fillStyle="#222222"
	        ctx.fillRect(120, 180, 560, 80)
	        ctx.fillRect(120, 300, 560, 80)
	        ctx.fillRect(120, 420, 560, 80)
	        ctx.fillRect(120, 540, 560, 80)
		ctx.fillRect(120, 660, 560, 80)
		ctx.fillRect(120, 780, 560, 80)
		ctx.fillRect(120, 900, 560, 80)
	        ctx.fillRect(120, 1020, 560, 80)
                ctx.fillRect(120, 1140, 560, 80)
	        ctx.fillRect(120, 1260, 560, 80)
		ctx.fillRect(120, 1380, 560, 80)
	        ctx.fillStyle="#264677"
	        ctx.fillRect(120, 184, 5.6*axes-2, 72)
	        ctx.fillStyle="#777626"
	        ctx.fillRect(682-5.6*horseshoe, 184, 5.6*horseshoe-2, 72)
	        ctx.fillStyle="#424242"
	        ctx.fillRect(120, 304, 5.6*moderate-2, 72)
	        ctx.fillStyle="#9e116f"
	        ctx.fillRect(682-5.6*radical, 304, 5.6*radical-2, 72)
	        ctx.fillStyle="#47871c"
	        ctx.fillRect(120, 424, 5.6*political-2, 72)
	        ctx.fillStyle="#951631"
	        ctx.fillRect(682-5.6*apolitical, 424, 5.6*apolitical-2, 72)
	        ctx.fillStyle="#316151"
	        ctx.fillRect(120, 544, 5.6*dead-2, 72)
	        ctx.fillStyle="#147b98"
	        ctx.fillRect(682-5.6*leaning, 544, 5.6*leaning-2, 72)
		ctx.fillStyle="#89192b"
	        ctx.fillRect(120, 664, 5.6*leftist-2, 72)
	        ctx.fillStyle="#6e7427"
	        ctx.fillRect(682-5.6*rightist, 664, 5.6*rightist-2, 72)
		ctx.fillStyle="#264677"
	        ctx.fillRect(120, 784, 5.6*statist-2, 72)
	        ctx.fillStyle="#267752"
	        ctx.fillRect(682-5.6*liberal, 784, 5.6*liberal-2, 72)
		ctx.fillStyle="#265277"
	        ctx.fillRect(120, 904, 5.6*anfash-2, 72)
	        ctx.fillStyle="#852132"
	        ctx.fillRect(682-5.6*capcom, 904, 5.6*capcom-2, 72)
	        ctx.fillStyle="#169344"
	        ctx.fillRect(120, 1024, 5.6*vegan-2, 72)
	        ctx.fillStyle="#7b232f"
	        ctx.fillRect(682-5.6*meat, 1024, 5.6*meat-2, 72)
	        ctx.fillStyle="#169567"
	        ctx.fillRect(120, 1144, 5.6*healthy-2, 72)
	        ctx.fillStyle="#424242"
	        ctx.fillRect(682-5.6*junk, 1144, 5.6*junk-2, 72)
                ctx.fillStyle="#a3708d"
	        ctx.fillRect(120, 1264, 5.6*smart-2, 72)
	        ctx.fillStyle="#333161"
	        ctx.fillRect(682-5.6*strong, 1264, 5.6*strong-2, 72)
		ctx.fillStyle="#5e5932"
	        ctx.fillRect(120, 1384, 5.6*fast-2, 72)
	        ctx.fillStyle="#017dbb"
	        ctx.fillRect(682-5.6*patient, 1384, 5.6*patient-2, 72)
	        ctx.fillStyle="#222222"
	        ctx.font="700 80px Montserrat"
	        ctx.textAlign="left"
	        ctx.fillText("CenterValues", 20, 90)
	        ctx.font="50px Montserrat"
	        ctx.fillText(ideology, 20, 140)
	
	        ctx.textAlign="left"
	        if (axes  > 30) {ctx.fillText(axes + "%", 130, 237.5)}
	        if (moderate     > 30) {ctx.fillText(moderate + "%", 130, 357.5)}
	        if (political   > 30) {ctx.fillText(political + "%", 130, 477.5)}
	        if (dead > 30) {ctx.fillText(dead + "%", 130, 597.5)}
		if (leftist  > 30) {ctx.fillText(leftist + "%", 130, 717.5)}
		if (statist  > 30) {ctx.fillText(statist + "%", 130, 837.5)}
		if (anfash  > 30) {ctx.fillText(anfash + "%", 130, 957.5)}
	        if (vegan   > 30) {ctx.fillText(vegan + "%", 130, 1077.5)}
	        if (healthy > 30) {ctx.fillText(healthy + "%", 130, 1197.5)}
                if (smart   > 30) {ctx.fillText(smart + "%", 130, 1317.5)}
		if (fast > 30) {ctx.fillText(fast + "%", 130, 1437.5)}
	        ctx.textAlign="right"
	        if (horseshoe    > 30) {ctx.fillText(horseshoe + "%", 670, 237.5)}
	        if (radical     > 30) {ctx.fillText(radical + "%", 670, 357.5)}
	        if (apolitical > 30) {ctx.fillText(apolitical + "%", 670, 477.5)}
	        if (leaning  > 30) {ctx.fillText(leaning + "%", 670, 597.5)}
		if (rightist  > 30) {ctx.fillText(rightist + "%", 670, 717.5)}
		if (liberal   > 30) {ctx.fillText(liberal + "%", 670, 837.5)}
		if (capcom  > 30) {ctx.fillText(capcom + "%", 670, 957.5)}
	        if (meat   > 30) {ctx.fillText(meat + "%", 670, 1077.5)}
	        if (junk   > 30) {ctx.fillText(junk + "%", 670, 1197.5)}
                if (strong  > 30) {ctx.fillText(strong + "%", 670, 1317.5)}
		if (patient > 30) {ctx.fillText(patient + "%", 670, 1437.5)}
	
	        ctx.font="300 30px Montserrat"
	        ctx.fillText("centervalues.github.io", 780, 30)
		    ctx.fillText("Hardmode", 780, 60)
	        ctx.textAlign="center"
	        ctx.fillText("Theoretic Axis: " + document.getElementById("Theoretic-label").innerHTML, 400, 175)
	        ctx.fillText("Beliefal Axis: " + document.getElementById("Beliefal-label").innerHTML, 400, 295)
	        ctx.fillText("Politic Axis: " + document.getElementById("Politic-label").innerHTML, 400, 415)
	        ctx.fillText("Coordinatic Axis: " + document.getElementById("Coordinatic-label").innerHTML, 400, 535)
		ctx.fillText("Wing Axis: " + document.getElementById("Wing-label").innerHTML, 400, 655)
		ctx.fillText("Govermental Axis: " + document.getElementById("Govermental-label").innerHTML, 400, 775)
		ctx.fillText("Diagonal Axis: " + document.getElementById("Diagonal-label").innerHTML, 400, 895)
	        ctx.fillText("Food Preference Axis: " + document.getElementById("Food-label").innerHTML, 400, 1015)
	        ctx.fillText("Healthiness Axis: " + document.getElementById("Healthiness-label").innerHTML, 400, 1135)
    	    	ctx.fillText("Smartness Axis: " + document.getElementById("Smartness-label").innerHTML, 400, 1255)
		ctx.fillText("Speed Axis: " + document.getElementById("Speed-label").innerHTML, 400, 1375)
	        document.getElementById("banner").src = c.toDataURL();
	    }
	    </script>
	</body>