<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <title>Accueil</title>
		<link rel="stylesheet" type="text/css" href="style/style_index.css">
		<script src="script/jkonva.js"></script>


	</head>

	<body>
		<div id="home">			
		</div>
		<div id="container">
			<div role="presentation">
				<canvas></canvas>
			</div>
		</div>
		<script>
			var width = window.innerWidth-15;
		    var height = window.innerHeight-70;


		    var stage = new Konva.Stage({
		        container: 'container',
		        width: width,
		        height: height,
		    });

		    var layer = new Konva.Layer();

		    stage.add(layer);

			// Groupe 1 polytech
	        	var cirlce_polytech = new Konva.Circle({
		            x: stage.getWidth() / 2,
		            y: stage.getHeight() / 2,
		            radius: 60,
		            fill: '#ADADAE',
		            stroke: '#162354',
		            strokeWidth: 5,
		            shadowColor: '#aaa',
		            shadowBlur: 20,
		            shadowOffset: {x : 5, y : 5},
		            shadowOpacity: 0.5,
		        });

		        var image_polytech = new Konva.Image({
			        x: stage.getWidth() / 2 -40,
			        y: stage.getHeight() / 2 -40,
			        width: 80,
			        height: 80
			    });
			    
		    	var group_polytech = new Konva.Group({
		            draggable: true,
		        });

				layer.add(group_polytech);
				group_polytech.add(cirlce_polytech);
				group_polytech.add(image_polytech);

				group_polytech.on('dblclick', function() {
		     		self.location.href='/bar/logmein.php';
		    	});

			    var imageObj_polytech = new Image();
		        imageObj_polytech.onload = function() {
			        image_polytech.image(imageObj_polytech);
			        layer.draw();
		        };

		    	imageObj_polytech.src = './img/admin.png';


		    // Groupe 2 avis
	        	var cirlce_avis = new Konva.Circle({
		            x: stage.getWidth() / 2-300,
		            y: stage.getHeight() / 2,
		            radius: 60,
		            fill: '#ADADAE',
		            stroke: '#162354',
		            strokeWidth: 5,
		            shadowColor: '#aaa',
		            shadowBlur: 20,
		            shadowOffset: {x : 5, y : 5},
		            shadowOpacity: 0.5,
		        });
			    
		        var image_avis = new Konva.Image({
		            x: stage.getWidth() / 2 -40-300,
		            y: stage.getHeight() / 2 -40,
		            width: 80,
		            height: 80
		          });

		        var group_avis = new Konva.Group({
		            draggable: true,
		        });

				layer.add(group_avis);
				group_avis.add(cirlce_avis);
				group_avis.add(image_avis);
				
				group_avis.on('dblclick', function() {
		    		self.location.href='/tab/index.php';
		    	});


			    var imageObj_avis = new Image();
		        imageObj_avis.onload = function() {
			        image_avis.image(imageObj_avis);
			        layer.draw();
		        };

				imageObj_avis.src = './img/tab.png';

			// Groupe 3 led
	        	var cirlce_led = new Konva.Circle({
		            x: stage.getWidth() / 2+300,
		            y: stage.getHeight() / 2,
		            radius: 60,
		            fill: '#ADADAE',
		            stroke: '#162354',
		            strokeWidth: 5,
		            shadowColor: '#aaa',
		            shadowBlur: 20,
		            shadowOffset: {x : 5, y : 5},
		            shadowOpacity: 0.5,
		        });

				var image_led = new Konva.Image({
			        x: stage.getWidth() / 2 -28+300,
			        y: stage.getHeight() / 2 -40,
			        width: 56,
			        height: 80
			    });

		        var group_led = new Konva.Group({
		            draggable: true,
		        });

				layer.add(group_led);
			    group_led.add(cirlce_led);
				group_led.add(image_led);

 				group_led.on('dblclick', function() {
		    		self.location.href='/table/index.php';
		    	});

			    var imageObj_led = new Image();
		        imageObj_led.onload = function() {
				    image_led.image(imageObj_led);
			        layer.draw();		        
			        
		        };

		        imageObj_led.src = './img/table.png';

		    
		</script>

		<div id="pied">
			<!-- Le contenu doit etre écrit ci-dessous -->
			<p>Développé par Benjamin Lefort et Kévin Colautti IMA5</p>
		</div>
	</body>
</html>