<?php

    if($_SESSION['id_user'] == "" ){
        echo '
			<script>
				window.location = "/login"
			</script>
        ';
    }

	$id = $pagina[1];
	$base = '';
    $bt_iz = '';
    $bt_dr = '';
	$circulo = '';

    $query = mysqli_query($connect,"SELECT * FROM Pabellones WHERE id = '".$id."' ");
	$data = mysqli_fetch_array($query);

    $queryIz = mysqli_query($connect,"SELECT * FROM Stands WHERE id_pabellon = '".$id."' AND posicion = 1 ");
	$dataIz = mysqli_fetch_array($queryIz);

    $queryDr = mysqli_query($connect,"SELECT * FROM Stands WHERE id_pabellon = '".$id."' AND posicion = 2 ");
	$dataDr = mysqli_fetch_array($queryDr);

    $base = $recursos.'/'.$data["imagen"]; 

    $bt_iz = '
        <a href="'.$url.'/info/'.$dataIz["id"].'">
            <img src="'.$recursos.'/'.$dataIz["boton"].'" width="250" style="position: fixed; bottom: 10%; left: 2%; z-index:2" class="parpadea">
        </a>
    ';
    $bt_dr = '
        <a href="'.$url.'/info/'.$dataDr["id"].'">
            <img src="'.$recursos.'/'.$dataDr["boton"].'" width="250" style="position: fixed; bottom: 10%; right: 2%; z-index:2" class="parpadea">
	   </a>
    ';

    $bt_iz_movil = '
        <a href="'.$url.'/info/'.$dataIz["id"].'">
            <img src="'.$recursos.'/'.$dataIz["boton"].'" width="250" style="margin-top: 15px">
        </a>
    ';
    $bt_dr_movil = '
        <a href="'.$url.'/info/'.$dataDr["id"].'">
            <img src="'.$recursos.'/'.$dataDr["boton"].'" width="250" >
	   </a>
    ';
?>

<div class="e_web">
	<a href="<?php echo $url; ?>/muestra">
        <img src="<?php echo $url; ?>/img/bt_volver_muestra.png" width="200" style="position: absolute; top: 20%; right: 10%;">
	</a>
	<?php echo $bt_iz; ?>
	<?php echo $bt_dr; ?>
	<img src="<?php echo $base; ?>" width="100%" >
</div>

<div class="e_movil" align="center">
	<img src="<?php echo $base; ?>" width="100%" >
	<?php echo $bt_iz_movil; ?>
	<?php echo $bt_dr_movil; ?>
    
    <a href="<?php echo $url; ?>/muestra">
        <img src="<?php echo $url; ?>/img/bt_volver_muestra.png" width="220">
	</a>
	
</div>

<style>
	.botones{
		position: absolute;
		border-radius: 30px;
		font-size: 11px;
		padding: 5px 20px;
		font-weight: bold;
	}
    
    .parpadea {
  
      animation-name: parpadeo;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;

      -webkit-animation-name:parpadeo;
      -webkit-animation-duration: 3s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
    }

    @-moz-keyframes parpadeo{  
      0% { transform: scale(1); }
      15% { transform: scale(1.1); }
        30% { transform: scale(1); }
      100% { transform: scale(1); }
    }

    @-webkit-keyframes parpadeo {  
      0% { transform: scale(1); }
      15% { transform: scale(1.1); }
        30% { transform: scale(1); }
      100% { transform: scale(1); }
    }

    @keyframes parpadeo {  
      0% { transform: scale(1); }
      15% { transform: scale(1.1); }
    30% { transform: scale(1); }
      100% { transform: scale(1); }
    }
</style>
	
<script>
$( document ).ready(function() {
	$("#maestro").height( $("#img_muestra").height() );
});
	
$( window ).resize(function() {
	$("#maestro").height( $("#img_muestra").height() );
});
	
</script>