<!-- begin mapy.php -->
 
 
<script type="text/javascript">

 $(document).ready(function() {
 
 var offset = $("#map").offset();
 var ox=offset.left;
 var oy=offset.top;
 var detail;
 
 
   var b=$("#bld option:selected").attr("title");
   var f=$("#flr").val();
   var mapa=b+"_"+f; 
 	 $("#map").attr("src","maps/"+mapa+".png");
   $(".device").remove(); 
   $(".popupinfo").remove(); 
    $.ajax({
      url: "include/mapy_ajax_s.php",
      type: "GET",
      data: "b="+b+"&f="+f+"&x="+ox+"&y="+oy,
      cache: false,
      async: false
     }).done(function(data) {
          $("#map").before(data);
     });
   
     
     
  $("#flr").change(function() {
  
   b=$("#bld option:selected").attr("title");
   f=$("#flr").val();
   mapa=b+"_"+f; 
 	 $("#map").attr("src","maps/"+mapa+".png");
 	 $(".device").remove();
   $(".popupinfo").remove(); 
 	  $.ajax({
      url: "include/mapy_ajax_s.php",
      type: "GET",
      data: "b="+b+"&f="+f+"&x="+ox+"&y="+oy,
      cache: false,
      async: false
     }).done(function(data) {
          $("#map").before(data);
     });
     
$(".device").hover(function(e) {
      //over
      var scrtop = $(window).scrollTop();
      var scrleft =$(window).scrollLeft();
      $(this).css('cursor','pointer');
      detail = $(this).attr("id"); 
      $("#"+detail).css('border','1px solid red');
      $("#i"+detail).css('left',(e.clientX+12+scrleft));
      $("#i"+detail).css('top',(e.clientY+12+scrtop));
  }, function() {
      //out
      $(this).css('cursor','auto');
      $("#"+detail).css('border','0');
      $("#i"+detail).css('left',-100);
      $("#i"+detail).css('top',-100);
}); 
       

});



 $("#bld").change(function() {
 
 
   var b=$("#bld option:selected").attr("title");
   
    $(".fff").remove(); 
 	  $.ajax({
      url: "include/ajax_patra.php",
      type: "GET",
      data: "b="+b,
      cache: false,
      async: false
     }).done(function(data) {
          $("#flr").append(data);
     });
     
     
   var f=$("#flr").val();
   var mapa=b+"_"+f; 
        
   
 	 $("#map").attr("src","maps/"+mapa+".png");
 	 $(".device").remove(); 
   $(".popupinfo").remove(); 
 	  $.ajax({
      url: "include/mapy_ajax_s.php",
      type: "GET",
      data: "b="+b+"&f="+f+"&x="+ox+"&y="+oy,
      cache: false,
      async: false
     }).done(function(data) {
          $("#map").before(data);
     });
     
$(".device").hover(function(e) {
      //over
      var scrtop = $(window).scrollTop();
      var scrleft =$(window).scrollLeft();
      $(this).css('cursor','pointer');
      detail = $(this).attr("id"); 
      $("#"+detail).css('border','1px solid red');
      $("#i"+detail).css('left',(e.clientX+12+scrleft));
      $("#i"+detail).css('top',(e.clientY+12+scrtop));
  }, function() {
      //out
      $(this).css('cursor','auto');
      $("#"+detail).css('border','0');
      $("#i"+detail).css('left',-100);
      $("#i"+detail).css('top',-100);
}); 
     
     
});



$(".device").hover(function(e) {
      //over
      var scrtop = $(window).scrollTop();
      var scrleft =$(window).scrollLeft();
      $(this).css('cursor','pointer');
      detail = $(this).attr("id"); 
      $("#"+detail).css('border','1px solid red');
      $("#i"+detail).css('left',(e.clientX+12+scrleft));
      $("#i"+detail).css('top',(e.clientY+12+scrtop));
  }, function() {
      //out
      $(this).css('cursor','auto');
      $("#"+detail).css('border','0');
      $("#i"+detail).css('left',-100);
      $("#i"+detail).css('top',-100);
}); 
     

   
    
     
       
});



</script>

 
<?php

     $dotaz=mysql_query("SELECT id,name,floors,mapname FROM buildings;");
     $seznamb='<select name="building" id="bld">';
     for ($i=0;$i<mysql_num_rows($dotaz);$i++) 
       { $building=mysql_fetch_row($dotaz); 
         $seznamb.='<option value="'.$building[0].'" title="'.$building[3].'">'.$building[1].'</option>';  
       };
     $seznamb.='</select>'; 
     
     $dotaz=mysql_query("SELECT id,name,floors,mapname FROM buildings;");
     $patro=mysql_fetch_row($dotaz); 
     $seznamf='<select name="floor" id="flr">';
     for ($i=1;$i<=$patro[2];$i++) {
     $seznamf.='<option value="'.$i.'" class="fff">'.$i.'</option>';  };
     $seznamf.='</select>'; 
     
     
     
     $nadpis="Mapy spotřeby";
     
     $obsah='
     
     <table>
     <tr><td style="text-align:right;font-weight:bold;">Budova:</td><td>'.$seznamb.'</td></tr>
     <tr><td style="text-align:right;font-weight:bold;">Patro:</td><td>'.$seznamf.'<div style="visibility:hidden;" id="ff"></div></td></tr>
     </table>  
     
     <br/><br/>
     <img id="map" src="maps/null.png" />
     
     ';
     

     
?>

            
            
            
                           
                             
            <div class="post">				
              <h2 class="title">
                <a href="#"><?php echo $nadpis; ?></a>
              </h2>				
              
              <div class="entry">		
                <?php echo $obsah; ?>     
              </div>			
            </div>
            
        
            
            
 <!-- end mapy.php -->