<?php session_start(); ?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <title>Accueil</title>
		<link rel="stylesheet" type="text/css" href="style/style_index.css">
		<script type="text/javascript" src="script/scripts.js"></script>
		<script src="script/jkonva.js"></script>
		<script type="text/javascript" src="script/jsweetalert.js"></script>
		<link rel="stylesheet" type="text/css" href="style/style_sweetalert.css">

		<?php 
			$_SESSION['client']="1";
			$_SESSION['soiree']="1";
		?>
	</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='polytech.php';
		    	});

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

		    	imageObj_polytech.src = './img/polytech.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='quest_0.php';
		    	});


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

				imageObj_avis.src = './img/avis.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='led.php';
		    	});

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

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

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

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

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

				layer.add(group_meteo);			    
				group_meteo.add(cirlce_meteo);
				group_meteo.add(image_meteo);

			    group_meteo.on('dblclick', function() {
			    	self.location.href='meteo.php';
			    });

			    var imageObj_meteo = new Image();
		        imageObj_meteo.onload = function() {
					image_meteo.image(imageObj_meteo);
			        layer.draw();        
		        };

		        imageObj_meteo.src = './img/meteo.png';


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

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

				layer.add(group_commande);
				group_commande.add(cirlce_commande);
				group_commande.add(image_commande);

				group_commande.on('dblclick', function() {
		    		self.location.href='commande.php';
		    	});

			    var imageObj_commande = new Image();
		        imageObj_commande.onload = function() {
					image_commande.image(imageObj_commande);
			        layer.draw();          
			        
		        };

		        imageObj_commande.src = './img/commande.png';

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

				var image_nous = new Konva.Image({
			        x: stage.getWidth() / 2 -40-212,
			        y: stage.getHeight() / 2 -40-212,
			        width: 80,
			        height: 80
			    });

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

				layer.add(group_nous);
			    group_nous.add(cirlce_nous);
				group_nous.add(image_nous);

 				group_nous.on('dblclick', function() {
			    	self.location.href='nous.php';
			    });

			    var imageObj_nous = new Image();
		        imageObj_nous.onload = function() {
			        image_nous.image(imageObj_nous);
			        layer.draw();
		        };

		        imageObj_nous.src = './img/nous.png';

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

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

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

				layer.add(group_app);
			    group_app.add(cirlce_app);
				group_app.add(image_app);

 				group_app.on('dblclick', function() {
			    	self.location.href='app.php';
			    });

			    var imageObj_app = new Image();
		        imageObj_app.onload = function() {
			        image_app.image(imageObj_app);
			        layer.draw();
		        };

		        imageObj_app.src = './img/jeux.png';

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

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

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

				layer.add(group_listecmd);
			    group_listecmd.add(cirlce_listecmd);
				group_listecmd.add(image_listecmd);

				group_listecmd.on('dblclick', function() {
			    	self.location.href='listecmd.php';
			    });

			    var imageObj_listecmd = new Image();
		        imageObj_listecmd.onload = function() {
					image_listecmd.image(imageObj_listecmd);
			        layer.draw();
		        };

		        imageObj_listecmd.src = './img/listecmd.png';

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

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

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

				layer.add(group_facebook);
			    group_facebook.add(cirlce_facebook);
				group_facebook.add(image_facebook);

			    group_facebook.on('dblclick', function() {
			    	self.location.href='facebook.php';
			    });

			    var imageObj_facebook = new Image();
		        imageObj_facebook.onload = function() {
					image_facebook.image(imageObj_facebook);
			        layer.draw();
		        };

		        imageObj_facebook.src = './img/facebook.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>