<?php 
error_reporting(true);
include("conexao.php");	

$phpini = parse_ini_file('config.ini');

$caminho = $phpini['caminho'];
//$caminho = 'localhost/tv';

$cod_tv = $_GET['cod_tv'];

$sqlc  = "CREATE TABLE IF NOT EXISTS tv_configuracoes (
id INT(6) AUTO_INCREMENT PRIMARY KEY,
titulo VARCHAR(50) NOT NULL,
cor_titulo VARCHAR(6) NOT NULL,
rodape1 VARCHAR(50) NOT NULL,
cor_rodape1 VARCHAR(6) NOT NULL,
rodape2 VARCHAR(50) NOT NULL,
cor_rodape2 VARCHAR(6) NOT NULL,
tempo_transicao int(2) NOT NULL
)";

$create = mysql_query($sqlc);

     $sel = mysql_query("select * from tabela_digital_tv limit 1");

     $sel_num_rows = mysql_num_rows($sel);
	 
	 if($_GET['cod_tv'] == '') {
     ?><script>window.location.href = 'http://<?= $caminho?>/programacao';</script><?
	 } 

$sel = mysql_query("select * from tv_configuracoes");

if(mysql_num_rows($sel) > 0) {

$title = mysql_result($sel,0,"titulo");	
$cor_titulo= mysql_result($sel,0,"cor_titulo");
$msg1 = mysql_result($sel,0,"rodape1");
$cor_rodape1= mysql_result($sel,0,"cor_rodape1");
$msg2 = mysql_result($sel,0,"rodape2");
$cor_rodape2= mysql_result($sel,0,"cor_rodape2");

  if(mysql_result($sel,0,"tempo_transicao") != '' and mysql_result($sel,0,"tempo_transicao") > 0) {
  $tempo = mysql_result($sel,0,"tempo_transicao");
  } else {
  $tempo = 15;
  }

} else {
$title = '';	
$cor_titulo= '#FF0';
$msg1 = '';
$cor_rodape1= '#FF0';
$msg2 = '';
$cor_rodape2= '#FF0';
$tempo = 15;
}

$tempo_arr = array(5,10,15,20,25,30);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
<title><?= $title ?></title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> 
<link rel="stylesheet" href="css/jquery.bxslider.css" type="text/css" media="screen">  
<link rel="stylesheet" href="css/side_panel.css">	
<script src="js/modernizr.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script> 
<script src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript" >

var slides = '';
	
	function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {  
      document.documentElement.requestFullScreen();  
    } else if (document.documentElement.mozRequestFullScreen) {  
      document.documentElement.mozRequestFullScreen();  
    } else if (document.documentElement.webkitRequestFullScreen) {  
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }  
  } else {  
    if (document.cancelFullScreen) {  
      document.cancelFullScreen();  
    } else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();  
    } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
    }  
  }  
}

</script>
<style>
	
.marquee {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  animation: marquee 10s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

</style>
</head>
<body>

    <div class="overlays overlay-open tela" style="display:none;" id="div_video">
    </div>
    
    <div class="overlays overlay-open tela"  style="display:none;" id="div_imagem">
       <img src="" id="imagem"/>
    </div>

<div style="float:right;z-index:3;position: absolute;right:2%;top:2%;"><main class="cd-main-content"><a href="#" class="cd-btn"><img src="css/images/logo/config.png" style="width:30px;height:30px;padding:5px;"></a></main></div>

<div class="overlay tela" id="tela"  style="display:none;">
  <div id="topo" style="color:#<?= $cor_titulo?>;"><?= $title ?><img src="http://<?= $caminho?>/css/images/logo/logo_syspan.png" style="float:right;margin-right:4%;" /></div>
  <div id="meio">
    <div id="meio_esquerdo">
      <ul class="slider" id="slider">
              <?  
			   if($_GET['cod_tv'] == '') {
			   $dir = 'images/';
			   } else {
			   $dir = 'images/'.$_GET['cod_tv'].'/';
			   }		   
			   			   
			  $arquivos = glob("$dir{*.jpg,*.png,*.gif,*.bmp}", GLOB_BRACE);
					foreach($arquivos as $img){?> 
                <li class="imagem_slider"><img src="<?= $img?>" class="imagem_slider"></li>
                <? } ?>
			</ul></div>
    <div id="meio_direito">
						<table id="tabtitulo">
						<tbody><tr>
						<th id="titulo"></th>
						<th id="titulo_valor">VALOR</th>
						</tr>
                        </tbody>
                        </table>
      <table id="tabpro" class="reference notranslate">
      </table>
    </div>
  </div>
    <div id="rodape" style="text-align:center;" class="marquee">
    <div>
  	    <span style="color:#<?= $cor_rodape1?>"><?= $msg1?></span>
  	    <span style="color:#<?= $cor_rodape1?>"><?= $msg1?></span>
    </div> 
  </div>
</div>
<script>
$( document ).ready(function() {
    //scrollMe('menuR');

	  $('.tela').on('click', function() {
        toggleFullScreen();
      });

$('#btn_salvar').on('click', function() {

  if($('#titulo_empresa').val() == '') {
  alert('Preencha o título');
  } else {
  document.frm.submit();
  }

});	


$('#btn_tv').on('click', function() {

  if($('#cod_tv').val() == '') {
  alert('Escolha a TV');
  } else {
  document.frm_tv.submit();
  }

});


  $('#btn_imagens').on('click', function() {

  document.location.href="/tv/images_tv";

  });
  
  
  $('#btn_programacao').on('click', function() {

  document.location.href="/tv/programacao";

  });
	

});


display = document.getElementById("bgvid");
	  
$(function() {

function slider(atual,total,voltas) {
 

                   if(y == num_itens) {
				   conta_voltas++;
				   y=0; 				
				   	
				   clearInterval(intervalo);
				   
				   recarrega_tabela(atual,total,voltas);
				   	 
			   
				   
				   } else {

     
var html = '';
				  	
					$('#titulo').html(container[y]['categoria']).hide().fadeIn();

						
						 for(var chave in container[y]['produtos']) {
                        // alert(container[y]['produtos'][chave]);
                           if(container[y]['promocao'][chave] != '1') {
						   html+='<tr><td style="width:85%;" colspan="2"><b><font id="produto">'+container[y]['produtos'][chave]+'</font></b></td><td style="width:15%;text-align:right;"><b><font id="preco">'+container[y]['valor'][chave]+'</font></b></td></tr>';
						   } else {
						   html+='<tr><td style="width:5%;border-right-color:#FFF;"><img src="css/images/promocao.png" height="40" style="float:left;" /></td><td style="width:80%;"><b><font id="promocao">'+container[y]['produtos'][chave]+'</font></b></td><td style="width:15%;text-align:right;"><b><font id="preco_promocao">'+container[y]['valor'][chave]+'</font></b></td></tr>';
						   }
						 }
						
					  $('#tabtitulo').hide().fadeIn();
                      $('#tabpro').html(html).hide().fadeIn();
					  $('#menuR').css({ "background-image": 'none' });
							    
                   y++;
				   
				   }
				  
				     
}


function recarrega_tabela(atual,total,voltas){

	    $.ajax({
               	
				type : "POST",
				url: "http://<?= $caminho?>/tabela/produtos.php",
                data      : 'cod_tv=<?= $_GET['cod_tv']?>',
				dataType: "json",
                crossDomain: true,
				success : function(data) {
			    //alert('sucesso');
				
				$('#tabpro').html("");
               		
				  num_itens = data.length;	
				  			
				  if(num_itens > 0) {
				  html = "";
				  container = [];
				  	
				  $.each( data, function ( i, val ) {
                  container[i] = {categoria: val.categoria, produtos: val.produtos, valor: val.valor, promocao: val.promocao};
				  });
				  
				 	 if(conta_voltas == voltas ) {
					 slides.stopAuto();	
				     conta_voltas=0;
					 executa(atual + 1,total);
					 } else {
					 slider(atual,total,voltas);
                     intervalo = window.setInterval(function(){slider(atual,total,voltas)}, <?= ($tempo * 1000)?>);
					 } 
                	                
				  } else { 
			         alert('Erro. Nenhum registro foi recebido.');		   
				  }
				 
				},
                error: function (xhr, status) {

                executa(atual + 1,total);
	            
				},
				timeout: 5000
            });

}

function carrega_tabela(total){

	    $.ajax({
               	
				type : "POST",
				url: "http://<?= $caminho?>/tabela/produtos.php",
                data      : 'cod_tv=<?= $_GET['cod_tv']?>',
				dataType: "json",
                crossDomain: true,
				success : function(data) {
			    //alert('sucesso');
				
				$('#tabpro').html("");
               		
				  num_itens = data.length;	
				  
                  if(num_itens > 0) {
				  html = "";
				  container = [];
				  	
				  $.each( data, function ( i, val ) {
                  container[i] = {categoria: val.categoria, produtos: val.produtos, valor: val.valor, promocao: val.promocao};
				  });
				  
				   executa(0,total);
                	                
				  } else { 
			         alert('Erro. Nenhum registro foi recebido.');		   
				  }
				 
				},
                error: function (xhr, status) {
			    //alert(xhr.statusText);
				alert('Não foi possível realizar a busca. Tente novamente.');
	            }
            });

}


function inicio() {

y = 0;
conta_voltas = 0;


$( "#div_imagem").hide();	
//$( "#div_video" ).hide();	
         
programacao = []; 
tabela = false;
	
		 	$.ajax({type : "POST",
			data      : 'cod_tv='+<?= $cod_tv?>,
            url : "lista_programacao.php",
			datatype: 'json',
            success : function(data) {
			
			   $.each(data,function(i, dados){			   
			   var vetor = {tipo:dados.tipo, titulo:dados.titulo, ordem:dados.ordem, tempo:dados.tempo_imagem, voltas:dados.voltas, arquivo:dados.arquivo};
			   
			   if(tabela == false && dados.tipo == 1) {
			    
			    if(slides == '') {
			        slides = $('#slider').bxSlider({
                        	 controls:false,
	                         auto: true,
	                         autoControls: false,
	                         pager:false,
	                         mode:'fade'
                    });
			    }
			   
			   tabela = true;
			   
			   }
			   
			   programacao[i] = vetor;
			   
			   });		  
			
			   if(tabela == true) {
		       carrega_tabela(programacao.length);
			   } else {
			   executa(0,programacao.length);
			   }
			
			},
            error: function (xhr, status) {
			  sem_conexao();
			  window.setTimeout(inicio(), 30000);
	        } 
		});

}


inicio(); // comeca tudo aqui


function com_conexao() {
  $("#overLay").hide();
}


function sem_conexao() {

$("#overLay").show();

}


function inicia_tabela(atual,total,voltas){
$("#tela").show();
$('.imagem_slider').css('width', '45vw');
$('.imagem_slider').css('height', '83vh');
slider(atual,total,voltas);
intervalo = window.setInterval(function(){slider(atual,total,voltas)}, <?= ($tempo * 1000)?>);
slides.startAuto();	
}

  function abre_imagem(atual,total,imagem,tempo) {
      $("#imagem").hide();
	  $(  "#div_imagem" ).hide();
	  caminho = 'http://<?= $caminho?>/programacao/'+imagem;
	  $( "#imagem" ).attr("src",caminho);
	  setTimeout(function(){
	    $(  "#div_video" ).hide(); $("#tela").hide(); $("#div_imagem" ).hide(); executa(atual+1,total);   
	  }, tempo * 1000);
     $(  "#div_imagem" ).show();
     $("#imagem").show();
  }



 function abre_video(atual,total,video,voltas) {   
 var voltas_video = 0;
  	
   $("#div_video").hide();

/*

   var display = document.createElement("video");
   var sourceMP4 = document.createElement("source"); 
   //sourceMP4.type = "video/mp4";
   sourceMP4.src = 'http://<?= $caminho?>/programacao/'+video;
   display.appendChild(sourceMP4);
   document.getElementById('div_video').appendChild(display);
   display.load();
   display.play();
   voltas_video++;
	  */
	  
	     var display = document.createElement("video");
   var sourceMP4 = document.createElement("source"); 
   //sourceMP4.type = "video/mp4";
   sourceMP4.src = 'http://<?= $caminho?>/programacao/'+video;
   display.appendChild(sourceMP4);
   document.getElementById('div_video').appendChild(display);   
   display.load();
   display.play();
   voltas_video++;	  
	  
	 display.addEventListener('ended',function(){ 
      
       if(voltas_video == voltas) {
	   
	   $("#div_video").hide();
	   $("#imagem").hide();
	   $("#div_imagem").hide();
	   
	   var box = document.getElementById("div_video");

        if (box.hasChildNodes()) {
        box.removeChild(box.childNodes[0]);
        }
	  	  
       executa(atual+1,total);		 
	 
	   } else {
	   display.pause();
       display.currentTime = 0;
	   display.play();
	   voltas_video++;
	   }
	 
	 },false);
     
	 
	 
	 $("#div_video").show();
  } 


  function executa(atual,total) {	
	
	$.ajax({type : "POST",
			data      : 'cod_tv='+<?= $cod_tv?>,
            url : "lista_programacao.php",
			datatype: 'json',
            success : function(data) {
			
			com_conexao();
				
				if(atual == total) {
				executa(0,total);
				} else {
				
				$("#tela").hide();
				$("#imagem").hide();
				$("#div_imagem").hide();
				$("#div_video").hide();
				
				switch(programacao[atual].tipo) {
				
				  case '1':
					inicia_tabela(atual,total,programacao[atual].voltas);		
					break;
				
				  case '2':
					abre_imagem(atual,total,programacao[atual].arquivo,programacao[atual].tempo);
					break;
				
				  case '3':
					abre_video(atual,total,programacao[atual].arquivo,programacao[atual].voltas);
					break;
				  
				  default:
					 //alert('default');
				}   
			  }
				
				
			},
            error: function (xhr, status) {
			window.setTimeout(inicio(), 30000);
			},
			timeout: 5000 
		});
		   
  }	
	
});



</script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<style>
.labels { width:100%; float:left; font-weight:bold; font-size:2vh;}
</style>
<div id="overLay" style="display:none;position:absolute;top:50%;left:50%;background-color:white;z-index:1002;overflow:auto;width:400px;text-align:center;height:400px;margin-left:-200px;margin-top:-200px;border: solid 5px #FF0000"><h3>Sem Resposta</h3><br>Aguardando o servidor<br><br><b>Reconectando...</b></div>


<div class="cd-panel from-right" style="z-index:3">
	<header class="cd-panel-header">
	<h1 style="display: block;font-size: 2.5vh;font-weight: bold;">Configurações</h1>	
		<a href="#0" class="cd-panel-close">Close</a>
	</header>
 
	<div class="cd-panel-container">
    	
        <div class="cd-panel-content">
        
        <h1 style="display: block;font-size: 2.2vh;font-weight: bold;">Programação</h1>
		<div style="clear:both;display:block;width:100%;text-align:center;margin:15px 0px;height:30px;">
        <button type="button" id="btn_programacao" class="button" style="display:block;float:none;margin:0 auto;">Gerenciar</button>
        </div>
        <hr>
        <h1 style="display: block;font-size: 2.2vh;font-weight: bold;">Tabela</h1>
        <form method="post" action="banco.php" name="frm" id="frm">
        <input type="hidden" name="cod_tv" value="<?= $_GET['cod_tv']?>" >
        <label class="labels" for="titulo_empresa">Título</label>
        <input name="titulo_empresa" id="titulo_empresa" type="text" value="<?= $title?>"  style="width:60%;display:inline;float:left;margin-bottom:10px;" placeholder=""><input name="cor_titulo" class="color" style="width:20%;display:inline;float:left;margin-bottom:10px;margin-left:10px;" value="<?= $cor_titulo?>"></input>
        
        <label class="labels" for="rodape1">Rodapé 1</label>
        <input name="rodape1" id="rodape1" type="text"  value="<?= $msg1?>" style="width:60%;display:inline;float:left;margin-bottom:10px;" placeholder="Rodapé 1"><input name="cor_rodape1" class="color" style="width:20%;display:inline;float:left;margin-bottom:10px;margin-left:10px;" value="<?= $cor_rodape1?>"></input>
        
        <label class="labels" for="rodape2">Rodapé 2</label>
        <input name="rodape2" id="rodape2" type="text" value="<?= $msg2?>"  style="width:60%;display:inline;float:left;margin-bottom:10px;" placeholder="Rodapé 2"><input name="cor_rodape2" class="color" style="width:20%;display:inline;float:left;margin-bottom:10px;margin-left:10px;" value="<?= $cor_rodape2?>"></input>
        
        <label class="labels" for="rodape2">Tempo de transição</label>
        <select name="tempo_transicao" id="tempo_transicao"  style="display:block;float:left;margin-bottom:10px;">
        <? foreach($tempo_arr as $valor) { ?>
          <option value="<?= $valor?>" <? if($valor == $tempo) { echo "selected"; }?>><?= $valor?></option>
        <? } ?>
        </select>
        <div style="clear:both;display:block;width:100%;text-align:center;margin:15px 0px;height:30px;">
        <button type="button" id="btn_salvar" class="button" style="display:block;float:none;margin:0 auto;">Salvar</button>
        </div>
         </form>
        <hr>
        <h1 style="display: block;font-size: 2vh;font-weight: bold;">Imagens</h1>
		<div style="clear:both;display:block;width:100%;text-align:center;margin:15px 0px;height:30px;">
        <button type="button" id="btn_imagens" class="button" style="display:block;float:none;margin:0 auto;">Gerenciar</button>
        </div>
        
        <hr>
        <h1 style="display: block;font-size: 2vh;font-weight: bold;">TV</h1>
        
        <div style="clear:both;display:block;width:100%;text-align:center;margin:15px 0px;height:30px;">
          <form action="" method="get" name="frm_tv" id="frm_tv">
            <select name="cod_tv" id="cod_tv">
            <option value="">Selecione</option>
			<? 
			$tv = mysql_query("select * from tabela_digital_tv");
			while($ts = mysql_fetch_array($tv)) { ?>
              <option value="<?= $ts['id']?>" <? if($_GET['cod_tv'] == $ts['id']) { echo "selected"; }?> ><?= $ts['titulo']?></option>
            <? } ?>
            </select>
            
            <button type="button" id="btn_tv" class="button" style="display:block;float:none;margin:10px auto;">OK</button>
                    
          </form>
        </div>
        
        
        </div> <!-- cd-panel-content -->
	
    </div> <!-- cd-panel-container -->
       
</div> <!-- cd-panel -->

</body>
</html>