<div class="show_antrian" id="show_antrian" align="center" style="width:105%;height:100%;background:#000" hidden>
		<div style="width:100%;background:#000;padding-top:40px;margin-left:-30px">
				<table style="font-size:4em;color:#fff;">	
					<col  width="50%">
					<tbody>
						<tr>
							<td class="judul">Nomor Antrian : </td>
						</tr>
						<tr>
							<td class="pulse"><label id="no_antrian">123</label></td>
						</tr>
						<tr>
							<td class="title"><label>Nomor Perkara : <span id="no_perk"></span></label></td>
						</tr>
						<tr>
							<td class="judul" style="border-top:2px solid #666;">Ruang Sidang </td>
						</tr>
							<td class="pulse"><label id="ruangan">gajah</label></td>
						</tr>
					</tbody>
			</table>
	</div>
</div>
<iframe id="target_frame1" width="100%" scrolling="NO" frameborder="0" src="<?php echo site_url('manageAntrian/display_iframe_by_ruang');?>">></iframe>
<hr class="thick-line" style="clear:both;">

<div style="height:100%">
	<iframe id="target_frame2" style="width:100%;height:420px;border:0px;overflow:hidden;" scrolling="NO" src="<?php echo site_url('manageAntrian/iframe_jadwal_list');?>">></iframe>
</div>
<div hidden id="div_audio">
	<audio id='audio_display' controls="controls" preload="auto"><source id="audio_source" src='' type="audio/wav" /></audio>
</div>
<script type="text/javascript">
	var on_call=true;var i=0;var nextSongs = [];
	<?php
	$i=0;
	$ruangs='';
	foreach ($ruang_sidang_list as $key => $value) {
		if($i!=0)$ruangs.=',';
		$ruangs.=$key;
		$i++;
	}
	?> 
		setInterval(function(){ 
			if (on_call){
				$.post( "<?php echo base_url('manageAntrian/cek_session_antrian/') ?>", { ruang_id: '<?php echo $ruangs;?>' })
				  .done(function( data ) {
				  	if (data!=''){
				  		
				  		on_call=false;
				  		var urls=JSON.parse(data);
				  		$('#no_antrian').text(urls.nomor_antrian);
				  		$('#ruangan').text(urls.ruangan);
				  		$('#no_perk').text(urls.nomor_perkara);
				  		$('#show_antrian').fadeIn();
				  		$('#audio_display').remove();
				  		$('#div_audio').append('<audio id="audio_display" controls="controls" preload="auto"><source id="audio_source" src="" type="audio/mp3" /></audio>');
				  		audios=$('#audio_display');
						source=$('#audio_source');
				  		source.attr('src', "").appendTo(source.parent());
				  		source.attr('src', "<?php echo base_url('resources/suara/mp3/opening.mp3');?>").appendTo(source.parent());
						audios.get(0).play();
						nextSongs = [];
						for (var key in urls.suara) {
				  			nextSongs.push(urls.suara[key]);
					    }
					    i=0;
						setup();
				  	}
				  });
			}
		}, 3000);
	
	function setup() {
	    audios.get(0).addEventListener('ended', function myFunction(){
	    	if (i==((nextSongs.length))){
	    		this.src = '';
	    		this.load(); 
	    		this.pause(); 
	    		on_call=true;
	    		$('#show_antrian').fadeOut();
	    	}else{
	    		this.src = nextSongs[i];
	        	this.load(); 
	        	this.play(); 
	    	}
	    	i++;
	    }, false); 
	} 
	setInterval(function(){ 
		if (on_call){
	    	var iframe1 = document.getElementById('target_frame1');
			iframe1.src = iframe1.src;
			var iframe2 = document.getElementById('target_frame2');
			iframe2.src = iframe2.src;
		}
	}, 30000);
	setInterval(function(){ 
		if (on_call){
    		window.open('<?php echo $history;?>','_self');
    	}
	}, 1800000);

</script>
<style type="text/css">
.judul{
	 color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	 text-align:center;
}
.pulse {
	   color: #222; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
	   /*color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; */
  	  padding-left: 20px;
	  font-weight:bold;
	  text-align:center;
	  font-size:3em;
	  -webkit-animation: pulse 1s ease infinite;
	  -moz-animation: pulse 1s ease infinite;
	  -ms-animation: pulse 1s ease infinite;
	  -o-animation: pulse 1s ease infinite;
	  animation: pulse 1s ease infinite;
	}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }

  25% {
    -webkit-transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }

  25% {
    -moz-transform: scale(1.1);
  }

  50% {
    -moz-transform: scale(1);
  }

  100% {
    -moz-transform: scale(1.2);
  }
}

@-ms-keyframes pulse {
  0% {
    -ms-transform: scale(1);
  }

  25% {
    -ms-transform: scale(1.1);
  }

  50% {
    -ms-transform: scale(1);
  }

  100% {
    -ms-transform: scale(1);
  }
}

@-o-keyframes pulse {
  0% {
    -o-transform: scale(1);
  }

  25% {
    -o-transform: scale(1.1);
  }

  50% {
    -o-transform: scale(1);
  }

  100% {
    -o-transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
.show_antrian{
	position:fixed;
	margin:-130px -20px;
}
.title{
	font-size:24px;
	color:fff;
	text-align:center;
}
.title span{
	color:ddd;	
}

</style>