{INCLUDE_HEADER}

<div class="content-slider">

	<!-- BEGIN BLOCK_SLIDER -->
	<div id="kb" class="slider carousel kb_elastic animate_text kb_wrapper" data-ride="carousel" data-interval="6000" data-pause="hover">
		<div class="carousel-inner" role="listbox">

			<!-- BEGIN WHILE_SLIDER -->
			<div class="item {SL_ACTIVE}" {LN_LINK}>

				<img src="uploads/slider/{SL_FOTO}" alt="{SL_NOME}" />

			</div>
			<!-- END WHILE_SLIDER -->

		</div>

		<!-- BEGIN SLIDER_MAIS_QUEUM -->
		<a class="left carousel-control kb_control_left" href="#kb" role="button" data-slide="prev">
			<span class="fa fa-angle-left kb_icons" aria-hidden="true"></span>
			<span class="sr-only">Anterior</span>
		</a>

		<a class="right carousel-control kb_control_right" href="#kb" role="button" data-slide="next">
			<span class="fa fa-angle-right kb_icons" aria-hidden="true"></span>
			<span class="sr-only">Próximo</span>
		</a>
		<!-- END SLIDER_MAIS_QUEUM -->

		<div class='icon-scroll'>
			<i class="fa fa-angle-down"></i>
		</div>

	</div>
	<!-- END BLOCK_SLIDER -->

</div>

<script>
	var $item = $('.carousel .item');
	var $wHeight = $(window).height();

	$item.eq(0).addClass('active');
	$item.height($wHeight);
	$item.addClass('full-screen');

	$('.carousel img').each(function() {
		var $src = $(this).attr('src');
		var $color = $(this).attr('data-color');
		$(this).parent().css({
			'background-image' : 'url(' + $src + ')',
			'background-color' : $color
		});
		$(this).remove();
	});

	$(window).on('resize', function (){
		$wHeight = $(window).height();
		$item.height($wHeight);
	});

	$('.carousel').carousel({
		interval: 6000,
		pause: "false"
	});
</script>

<div class="container-home">

	<div id="quemsomos" class="quemsomos" style="background-image: url('uploads/static/{QUEM_FUNDO}');">
		<div class="container">
			<div class="titles">
				<h1>{QUEM_TITULO}</h1>
				<div class="line"></div>
				<p>{QUEM_SUBTITULO}</p>
			</div>

			<div class="row">
				<div class="col-md-7">
					<div class="text">
						{QUEM_PRETEXTO}

						<a href="javascript:;" data-url="model/quemsomos" data-toggle="modal" data-target="#modalQuem" data-remote="false">SAIBA MAIS</a>
					</div>
				</div>
				<div class="col-md-5"></div>
			</div>
		</div>

		<script>
			$(document).ready(function(){
				$("#modalQuem").on("show.bs.modal", function(e) {
					$(".modal-body").html('<div style="padding: 20px;"><span class="fa fa-spinner fa-spin"></span> Carregando, aguarde...</div>');

					var link = $(e.relatedTarget);
					$(this).find(".modal-body").load(link.attr("data-url"));
				});
			});
		</script>
	</div>

	<div id="produtos" class="produtos">
		<div class="titles">
			<h1>{PROD_TITULO}</h1>
			<div class="line"></div>
			<p>{PROD_SUBTITULO}</p>
		</div>

		<script>
			$(document).ready(function(){
				$(".col-over").mouseover(function(){

					$cor       = $(this).attr("data-color");
					$iconeOver = $(this).attr("data-icon-over");

					$(this).find("img").attr("src", "uploads/produtos/"+$iconeOver);

					$(this).css({
						"background-color" : $cor,
						"color"            : "#fff"
					});
				});

				$(".col-over").mouseleave(function(){
					$icone = $(this).attr("data-icon");

					$(this).find("img").attr("src", "uploads/produtos/"+$icone);

					$(this).css({
						"background-color" : "#fff",
						"color"            : "#666"
					});
				});
			});
		</script>

		<div class="container">
			<div class="row">

				<!-- BEGIN BLOCK_PRODUTOS -->
				<div class="col-md-3 col-sm-6">
					<div class="col col-over" data-color="{LN_PROD->cor}" data-icon="{LN_PROD->icone}" data-icon-over="{LN_PROD->icone2}">
						<img src="uploads/produtos/{LN_PROD->icone}" alt="{LN_PROD->titulo}">
						<span>{LN_PROD->titulo}</span>
						<p>{LN_PROD->subtitulo}</p>
					</div>
				</div>
				<!-- END BLOCK_PRODUTOS -->

			</div>
		</div>
	</div>

	<div class="parapara parallax" data-stellar-background-ratio="0.3" style="background-image: url('uploads/static/{PARALLAX_FUNDO}');">
		<h1>{PARALLAX_TITULO}</h1>
		<h2>{PARALLAX_SUBTITULO}</h2>
	</div>

	<div id="onde" class="onde" style="background-image: url('uploads/static/{ONDE_FUNDO}');">
		<div class="container">
			<div class="title">
				<img src="uploads/static/{ONDE_TITLE}" alt="Onde encontrar" />
			</div>

			<div class="mapa">
				<img src="uploads/static/{ONDE_MAPA}" alt="Onde encontrar" />
			</div>

			<form class="formOnde" name="formOnde" method="post" action="#">
				<div class="row">
					<div class="col-md-6">
						<select name="estado" id="estado" onchange="buscarCidades();">
							<option value="" selected>estado</option>
							<!-- BEGIN WHILE_ESTADOS -->
							<option value="{EST_ID}">{EST_NOME}</option>
							<!-- END WHILE_ESTADOS -->
						</select>
					</div>
					<div class="col-md-6">
						<select name="cidade" id="loadCidades" onchange="buscarLojas();">
							<option value="">cidade</option>
						</select>
					</div>

					<div class="col-md-12 result">

					</div>
				</div>
			</form>
		</div>

		<script>
			function buscarCidades()
			{
				var estado = $('#estado').val();

				if(estado)
				{
					var url = 'model/getCidades/'+estado;
					$.get(url, function(dataReturn) {
						$('#loadCidades').html(dataReturn);
					});
				}
			}

			function buscarLojas()
			{
				var cidade = $('#loadCidades').val();

				if(cidade)
				{
					var url = 'model/getLojas/'+cidade;
					$.get(url, function(data) {
						$('.formOnde .result').html(data);
					});
				}
			}
		</script>
	</div>

	<div id="contato" class="contato" style="background-image: url('uploads/static/{CONT_FUNDO}');">
		<div class="titles">
			<h1>{CONT_TITULO}</h1>
			<div class="line"></div>
			<p>{CONT_SUBTITULO}</p>
		</div>

		<div class="container">
			<form name="formContato" class="formContato" method="post" action="#">
			<input type="hidden" name="formName" value="formContato" />
			<input type="hidden" name="nosp" value="" />

			<div class="col-md-12 inputs input-nome">
				<input class="form-control" name="nome" type="text" placeholder="nome" />
			</div>

			<div class="col-md-12 inputs input-email" style="margin-top: 7px!important;">
				<input class="form-control" name="email" type="text" placeholder="e-mail" />
			</div>

			<div class="col-md-12 inputs input-telefone" style="margin-top: 7px!important;">
				<input class="form-control maskTelefone" name="telefone" type="text" placeholder="telefone" />
			</div>

			<div class="col-md-4  inputs input-uf" style="margin-top: 7px!important;">
				<input class="form-control" name="uf" type="text" placeholder="uf" />
			</div>

			<div class="col-md-8 inputs input-cidade" style="margin-top: 7px!important;">
				<input class="form-control" name="cidade" type="text" placeholder="cidade" />
			</div>

			<div class="col-md-12 inputs input-msg" style="margin-top: 7px!important;">
				<textarea name="msg" rows="4" class="form-control" placeholder="Mensagem"></textarea>
			</div>

			<div class="col-md-12 inputs input-msg" style="margin-top: 7px!important;">
				<button class="send">
					<i class="fa fa-paper-plane" aria-hidden="true"></i>
					<span>Aguarde...</span>
				</button>
			</div>

			<div class="result"></div>
		</form>

		<script>
		$(document).ready(function(){
			enviandoContato = 0;
			$(".formContato .send").click(function(e) {
				e.preventDefault();

				if(enviandoContato == 1)
				{
					return false;
				}
				enviandoContato = 1;

				$(".formContato .send").addClass("disabled");
				$(".formContato .send span").show(0);
				$(".formContato .send i").hide(0);

				$(".formContato").ajaxSubmit({
					url     : "model/contato",
					type    : "POST",
					success : function(data){
						$(".send").removeClass("disabled");
						$(".formContato .send span").hide(0);
						$(".formContato .send i").show(0);
						$(".formContato .result").html(data);
						enviandoContato = 0;
					}
				});

				return false;
			});
			
			if (window.location.hash=="#ofertas") {
				window.location.href = "http://www.lojasgiga.com.br/ofertas";
			}

		});
		</script>
		</div>

	</div>

</div>