<style>
	#plusko {
		align-items: center;
		justify-content: center;
		display: flex;
		cursor: pointer;
		line-height: 1em;
		z-index: 1011;
	}
	#plusko:hover {
	}
	#container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		width: 100vw;
	}
	#dots {
		position: absolute;
		height: 100vh;
		width: 100vw;
	}
	.label {
		position: absolute;
		font-size: 20px !important;
		transition: .2s ease;
	}
	.label2:hover {
	}
	.labels {
		position: absolute;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		width: 1200px;
		height: 800px;
		transform: scale(0.7);
	}
	/*.labels:hover > *:not(:hover) {
		font-size: 0.45em;
	}*/
	.label a {
		color: #000;
	}
	.label2 span {
		transition: .1s;
	}
	.label2 span:hover {
		border-bottom: solid 0.1em #d73648;
	}
	.label2 a:hover {
		opacity: 1 !important;
	}
	.label span:hover ~ .cross {
		display: none;
	}
	#cinnosti {
		left: auto;
		right: auto;
		top: 70vh;
	}
	#predseda {
		left: 200px;
		top: 100px;
	}
	#prebiram {
		right: 150px;
		top: 150px;
	}
	#zapojit {
		left: 150px;
		top: 400px;
	}
	#zalozit {
		top: 600px;
		right: 170px;
	}
	#oborovky {
		left: 300px;
		top: 700px;
	}
	.active {
	}
	.cross {
	   width: 0.7em;
	   height: 0.7em;
	   position: relative;
	}
	.label.label2 span a {
		padding: 0.5em;
	}

	.cross:before, .cross:after {
	  content: "";
	  position: absolute;
	  z-index: -1;
	  background: #d73648;
	}

	.cross:before {
	  left: 50%;
	  width: 20%;
	  margin-left: -5%;
	  height: 100%;
	}

	.cross:after {
	  top: 50%;
	  height: 20%;
	  margin-top: -5%;
	  width: 100%;
	}
	.bottom-right {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-left: 90%;
		margin-top: 5%;
	}
	.top-right {
		position: absolute;
		right: 0;
		top: 0;
		margin-left: 90%;
		margin-bottom: 5%;
	}
	.bottom-left {
		position: absolute;
		left: 0;
		bottom: 0;
		margin-right: 110%;
		margin-top: 5%;
	}
	.top-left {
		position: absolute;
		left: 0;
		top: 0;
		margin-right: 110%;
		margin-bottom: 5%;
	}
	.pedftext {
		position: absolute;
		font-size: calc(var(--font-size) / 1.7);
		left: 5vw;
		bottom: 5vh;
		line-height: 1;
		margin-bottom: 0;
	}
	.dotted {
		border-top: dotted 1px;
	}
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}	.spinny {
		opacity: 0;
    }

    #plusko:hover .spinny {
    	opacity: 1;
		animation: rotating 2s linear infinite;
	}
	#plusko:hover .not-spinny {
		opacity: 0;
	}
@media screen and (max-width: 800px) {
	#plusko {
		display: none
	}
	#cinnosti {
		left: auto;
		right: auto;
		top: 70vh;
	}
	#predseda {
		top: 25vh;
		width: calc(100% - 16em);
		left: 0;
		padding: 0;
		padding-left: 20px;
	}
	#prebiram {
		top: 37.5vh;
		width: calc(100% - 16em);
		left: 0;
		padding: 0;
		padding-left: 20px;
	}
	#zapojit {
		top: 50vh;
		width: calc(100% - 16em);
		left: 0;
		padding: 0;
		padding-left: 20px;
	}
	#zalozit {
		top: 62.5vh;
		width: calc(100% - 16em);
		left: 0;
		padding: 0;
		padding-left: 20px;
	}
	#oborovky {
		top: 75vh;
		width: calc(100% - 16em);
		left: 0;
		padding: 0;
		padding-left: 20px;
	}
	.cross {
		display: none;
		width: 0 !important;
		height: 0!important;
		position: absolute;
	}
	.labels:hover > *:not(:hover) {
		font-size: calc(var(--font-size) / 1.7);
	}
	#cinnosti,
	#predseda,
	#prebiram,
	#zapojit,
	#zalozit,
	#oborovky {
		border-radius: 4vw;
		background-color: var(--color-primary);
		color: #fff !important;
        padding: 3rem 1rem;
        margin-left: 8em;
        margin-right: 8em;
        text-align: center;
        cursor: pointer;
	}
	.label.label2 span a {
        font-size: calc(var(--font-size));
		color: #fff;
	}
	svg {
		display: none
	}
	.labels {
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		transform: scale(0.9);
	}
}
</style>

<script>
	import Logo from '../components/logo.svelte';
	import anime from 'animejs/lib/anime.es.js';
	import { onMount, afterUpdate } from 'svelte';
	//import { watchResize } from 'svelte-watch-resize';

	let clicked = false;
	let what = {
		"predseda" : [ 0, 0, 0, 0 ],
		"prebiram" : [ 0, 0, 0, 0 ],
		"zapojit" : [ 0, 0, 0, 0 ],
		"zalozit" : [ 0, 0, 0, 0 ],
		"oborovky" : [ 0, 0, 0, 0 ],
	}
	function clicked_fun() {
		clicked = !clicked;

		if (clicked) {
    		setTimeout(() => {
        		let predseda = document.getElementById("predseda");
        		let prebiram = document.getElementById("prebiram");
        		let zapojit = document.getElementById("zapojit");
        		let zalozit = document.getElementById("zalozit");
        		let oborovky = document.getElementById("oborovky");
        		let plusko = document.getElementById("plusko")

        		what["predseda"] = [ predseda.clientHeight, predseda.clientWidth, predseda.offsetLeft, predseda.offsetTop ];
        		what["prebiram"] = [ prebiram.clientHeight, prebiram.clientWidth, prebiram.offsetLeft, prebiram.offsetTop ];
        		what["zapojit"] = [ zapojit.clientHeight, zapojit.clientWidth, zapojit.offsetLeft, zapojit.offsetTop ];
        		what["zalozit"] = [ zalozit.clientHeight, zalozit.clientWidth, zalozit.offsetLeft, zalozit.offsetTop ];
        		what["oborovky"] = [ oborovky.clientHeight, oborovky.clientWidth, oborovky.offsetLeft, oborovky.offsetTop ];
        		what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];

        		console.log(what);
        	}, 150);
    	}
	}

    function getOffset( el ) {
    	console.log(el);
        var rect = el.getBoundingClientRect();
        return {
            left: rect.left + window.pageXOffset,
            top: rect.top + window.pageYOffset,
            width: rect.width || el.offsetWidth,
            height: rect.height || el.offsetHeight
        };
    }

    function connect(div1, div2, color, thickness) { // draw a line connecting elements
        var off1 = getOffset(div1);
        var off2 = getOffset(div2);
        // bottom right
        var x1 = off1.left + off1.width;
        var y1 = off1.top + off1.height;
        // top right
        var x2 = off2.left + off2.width;
        var y2 = off2.top;
        // distance
        var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
        // center
        var cx = ((x1 + x2) / 2) - (length / 2);
        var cy = ((y1 + y2) / 2) - (thickness / 2);
        // angle
        var angle = Math.atan2((y1-y2),(x1-x2))*(180 / Math.PI);
        // make hr
        var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";// "
        /**/
        // alert(htmlLine);
        document.body.innerHTML += htmlLine;
    }
    function vwTOpx(value) {
        var w = window,
          d = document,
          e = d.documentElement,
          g = d.getElementsByTagName('body')[0],
          x = w.innerWidth || e.clientWidth || g.clientWidth,
          y = w.innerHeight|| e.clientHeight|| g.clientHeight;

        var result = (x*value) / 100;
        document.getElementById("result_vw_px").innerHTML = result;  // affichage du résultat (facultatif) 
        return result;
      }

      function vhTOpx(value) {
        var w = window,
          d = document,
          e = d.documentElement,
          g = d.getElementsByTagName('body')[0],
          x = w.innerWidth || e.clientWidth || g.clientWidth,
          y = w.innerHeight|| e.clientHeight|| g.clientHeight;

        var result = (y*value) / 100;
        return result;
      }

      function resize() {
      	if (document.querySelector("#predseda")) {
        		let predseda = document.getElementById("predseda");
        		let prebiram = document.getElementById("prebiram");
        		let zapojit = document.getElementById("zapojit");
        		let zalozit = document.getElementById("zalozit");
        		let oborovky = document.getElementById("oborovky");
        		let plusko = document.getElementById("plusko")

        		what["predseda"] = [ predseda.clientHeight, predseda.clientWidth, predseda.offsetLeft, predseda.offsetTop ];
        		what["prebiram"] = [ prebiram.clientHeight, prebiram.clientWidth, prebiram.offsetLeft, prebiram.offsetTop ];
        		what["zapojit"] = [ zapojit.clientHeight, zapojit.clientWidth, zapojit.offsetLeft, zapojit.offsetTop ];
        		what["zalozit"] = [ zalozit.clientHeight, zalozit.clientWidth, zalozit.offsetLeft, zalozit.offsetTop ];
        		what["oborovky"] = [ oborovky.clientHeight, oborovky.clientWidth, oborovky.offsetLeft, oborovky.offsetTop ];
        		what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];

        		console.log(what);
      	}
      }

      onMount(() => {
      	if (window.innerWidth <= 800)
      		clicked = true;
      })
</script>

<svelte:head>
	<title>Spolky a SORky PedF UK | Chci se zapojit</title>
</svelte:head>
<!--<svelte:window use:watchResize={resize}/>-->

<Logo keep={true}/>

<main id="container">
	<div id="plusko" class:active="{clicked}" on:click="{clicked_fun}">
    	{#if clicked}
        	<img src="/img/main-btn-active.png">
    	{:else}
    		<div style="position: relative">
        	<img src="/img/main-btn.png" class="not-spinny" style="height:60px; width: 60px">
        	<img src="/img/main-btn-spin.png" style="position:absolute; left:0; top: 0; height: 60px; width: 60px" class="spinny">
    		</div>
    	{/if}
    </div>

	{#if clicked }
	<div class="labels">
		<svg width="1200" height="800" style="position: absolute; left: 0; top: 0">
    		<line
    			x1="{what['predseda'][1] + what['predseda'][2]}"
    			y1="{what['predseda'][0] + what['predseda'][3]}"
    			x2="{what['zapojit'][2] + what['zapojit'][1]}"
    			y2="{what['zapojit'][3]}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>
    		<line
    			x1="{what['zapojit'][2] + what['zapojit'][1]}"
    			y1="{what['zapojit'][3]}"
    			x2="{what['oborovky'][1] + what['oborovky'][2] - 7}"
    			y2="{what['oborovky'][3] + 10}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>
    		<line
    			x1="{what['oborovky'][1] + what['oborovky'][2] - 7}"
    			y1="{what['oborovky'][3] + 10}"
    			x2="{what['zalozit'][2] + 10}"
    			y2="{what['zalozit'][3] + 5}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>
    		<line
    			x1="{what['zalozit'][2] + 10}"
    			y1="{what['zalozit'][3] + 5}"
    			x2="{what['prebiram'][2] + 10}"
    			y2="{what['prebiram'][3] + what['prebiram'][0]}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>
    		<line
    			x1="{what['prebiram'][2] + 10}"
    			y1="{what['prebiram'][3] + what['prebiram'][0]}"
    			x2="{what['predseda'][1] + what['predseda'][2]}"
    			y2="{what['predseda'][0] + what['predseda'][3]}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>

    		<line
    			x1="{what['predseda'][1] + what['predseda'][2]}"
    			y1="{what['predseda'][0] + what['predseda'][3]}"
    			x2="{600}"
    			y2="{400}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>
    		<line
    			x1="{what['zapojit'][2] + what['zapojit'][1]}"
    			y1="{what['zapojit'][3]}"
    			x2="{600}"
    			y2="{400}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>
    		<line
    			x1="{what['oborovky'][1] + what['oborovky'][2] - 7}"
    			y1="{what['oborovky'][3] + 10}"
    			x2="{600}"
    			y2="{400}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>
    		<line
    			x1="{what['zalozit'][2] + 10}"
    			y1="{what['zalozit'][3] + 5}"
    			x2="{600}"
    			y2="{400}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>
    		<line
    			x1="{what['prebiram'][2] + 10}"
    			y1="{what['prebiram'][3] + what['prebiram'][0]}"
    			x2="{600}"
    			y2="{400}"
    			stroke="black"
				stroke-dasharray="5,5"
			/>

    	</svg>
		<div class="label label2" id="predseda">
			<span><a href="/predseda">Předseda spolku</a></span>
			<div class="cross bottom-right"></div>
		</div>
		<div class="label label2" id="prebiram">
			<span style="padding-right: 0.5em"><a href="/prebiram">Přebírám spolek</a></span>
			<div class="cross bottom-left"></div>
		</div>
		<div class="label label2" id="zapojit">
			<span><a href="/zapojit-se">Chci se zapojit</a></span>
			<div class="cross top-right"></div>
		</div>
		<div class="label label2" id="zalozit">
			<span style="padding-right: 0.5em"><a href="/zalozit-spolek">Chci založit spolek</a></span>
			<div class="cross top-left"></div>
		</div>
		<div class="label label2" id="oborovky">
			<span style="padding-right: 0.5em"><a href="/oborovky">Chci vědět víc o oborovkách</a></span>
			<div class="cross top-right"></div>
		</div>
	</div>
	{:else }
		<span class="label" id="cinnosti">Činnosti ve spolcích</span>
	{/if}
	<canvas id="dots">
	</canvas>

	<div class="pedftext">
		<p>Pedagogická fakulta</p>
		<b style="color: #d73648">Univerzita Karlova</b>
		<img src="/svg/zobacek.svg" style="width:0.8em; height: 0.8em; position: absolute; left: 0; bottom: 0; margin-left: -0.5em; margin-bottom: -0.5em; fill: #d73648">
	</div>
</main>
