<?php
include('include/class.php');

$title = 'เสี่ยงเซียมซี';

$get_id = $_GET['id'];
$list = array('table'=>'seamsi','where'=>'id = "'.$get_id.'" AND status = "1"');				  
$view = $view_db->view($list);
$row = $view_db->q($view);	

$og_title = 'เสี่ยงเซียมซี ' . $row['name'];
$img_t =  $row['image'];
$og_image = $url_yonfile.$img_t;
$og_image2 = $url_yonfile.$img_t;
include('include/header.php');
?>
<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div style="margin-top:0px;">
                <div class="row">
                  <!--<div class="col-md-12"><div class="HeadText"> เสี่ยงเซียมซี </div></div>-->
                </div>
        </div>
    </div>
</div><!--/row-->
</div><!--/.container--> 
    <!-- Begin page content -->
    <div class="">
      <div class="HeadText2" align="center">
        <h1><?php echo $row['name']?></h1>
      </div>
      <div class="imgbg" style="background-image:url(<?php echo $url_yonfile.$row['bg_image']?>);">
 	<div class="container" style="max-width:1000px;">
         <div class="">
         <div class="" align="center">
         	<div class="text_reading">
             ตั้งจิตอธิษฐาน นึกถึงเรื่องที่อยากถาม แล้วกดปุ่มเสี่ยงทาย
            </div>
          
           <div class="DIV_seamsi" id="DIV_seamsi">
           
           		<div id="Dloading" class="Dloading">กรุณารอคำทำนาย สักครู่...</div>
                <div style="position:absolute;padding-top:90px;">
                	<img id="logo_seamsi" src="images/logo_seamsi.png" width="364" height="361" class="img-responsive"/>
                </div>
                <?php
				$fortune = 'cc.png';
				$fortune_gif = 'cd.gif';
                if($row['id'] == '15')
				{
					$fortune = 'cookie.png';
					$fortune_gif = 'cookie.gif';
				}
				 if($row['id'] == '16')
				{
					$fortune = 'wunneeginarrai.png';
					$fortune_gif = 'wunneeginarrai.gif';
				}
				?>
                
                
                <div align="center" style="position:absolute;">
                	<img  id="shake"  src="images/<?php echo $fortune ?>" width="380" height="450"  class="img-responsive"/>
                    <img  id="shake_gif" src="images/<?php echo $fortune_gif ?>" width="380" height="450"  class="img-responsive" style="display:none;"/>
                </div>
                <div  style="position:absolute;margin-left:110px;margin-top:260px;cursor:pointer;border:0px solid #F00;" onclick="loading_seamsi()"> 
                	<img src="images/btn_reading.png" width="143" height="143"/ title="กดเสี่ยงทายเซียมซี" id="loading_seamsi">
                </div>
              
                
           	</div>
         </div>
        </div>
         <div style="margin-top:50px;margin-bottom:30px;">
         	<?php echo $row['detail']?>
         </div>
         
         
         
     </div>
 </div>
     
    </div>

 

<?php
include('include/footer.php');
?>
<?php
$list2 = array('table'=>'seamsi_detail','where'=>'seamsi_id = "'.$get_id.'" order by RAND() LIMIT 1 ');				  
$view2 = $view_db->view($list2);
$row2 = $view_db->q($view2);	
?>
<script>
$(window).load(function() { // better to use $(document).ready(function(){
    $('#loading_seamsi').on('click touchstart', function() {
		
        document.getElementById("Dloading").style.display = "inline";
		document.getElementById("shake_gif").style.display = "inline";
		document.getElementById("shake").style.display = "none";
		setTimeout(function(){ window.location.href = "reading.php?id=<?php echo $get_id;?>&num=<?php echo $row2['id']?>"; }, 3000);
		
    });
});
document.getElementById("DIV_seamsi").addEventListener("mouseover", mouseover_shake);
document.getElementById("DIV_seamsi").addEventListener("mouseout", mouseout_shake);
function mouseover_shake()
{
	document.getElementById("shake_gif").style.display = "inline";
	document.getElementById("shake").style.display = "none";
}
function mouseout_shake()
{
	document.getElementById("shake_gif").style.display = "none";
	document.getElementById("shake").style.display = "inline";
}
</script>