<?php 
/*
 * Template Name: Homepage
 * Description: Homepagina
 */

ob_start();
get_header();
$header = ob_get_contents();
ob_end_clean();

ob_start();
require_once('include/slider.php');
$carousel = ob_get_contents();
ob_end_clean();

$header = str_replace('<!-- {homepageCarousel} -->', $carousel, $header);
echo $header;
?>
		
<?php 
$args = array('post_type' => array( 'page'), 'post_title' => 'Home');
$query = new WP_Query($args);
while ( $query->have_posts() ) : $query->the_post();

	$homeLeft = get_field('left');
	$homeRight = get_field('right');
    $link1 = get_field('link_1');
    $link2 = get_field('link_2');
    $link3 = get_field('link_3');
    $url1 = get_field('url');
    $url2 = get_field('url_2');
    $url3 = get_field('url_3');
    $afbeelding = get_field('afbeelding');
    $afbeelding2 = get_field('afbeelding_2');
    $afbeelding3 = get_field('afbeelding_3');


    $icoon1 = get_field('icoon_1');
    $icoontitel1 = get_field('titel_icoon_1');
    $icoontekst1 = get_field('tekst_icoon_1');

    $icoon2 = get_field('icoon_2');
    $icoontitel2 = get_field('titel_icoon_2');
    $icoontekst2 = get_field('tekst_icoon_2');

    $icoon3 = get_field('icoon_3');
    $icoontitel3 = get_field('titel_icoon_3');
    $icoontekst3 = get_field('tekst_icoon_3');

    $icoon4 = get_field('icoon_4');
    $icoontitel4 = get_field('titel_icoon_4');
    $icoontekst4 = get_field('tekst_icoon_4');

    $icoon5 = get_field('icoon_5');
    $icoontitel5 = get_field('titel_icoon_5');
    $icoontekst5 = get_field('tekst_icoon_5');

    $icoon6 = get_field('icoon_6');
    $icoontitel6 = get_field('titel_icoon_6');
    $icoontekst6 = get_field('tekst_icoon_6');
endwhile;    
?>		

		<div class="row-fluid">
			<div class="span6">
				<h1>SAMEN BOUWEN <span class="bluetxt">IN</span></h1>
				<div class="blueline"></div>
			</div>
			<div class="span6">
				<div class="pull-right">
					<a href="https://twitter.com/SamenBouwen_in" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/imgs/t-blue.jpg" alt="" /></a>&nbsp;&nbsp;&nbsp;
					<a href="https://www.facebook.com/SamenBouwen.in" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/imgs/f-blue.jpg" alt="" /></a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="row-fluid">			
			<div class="span6"><?php echo $homeLeft; ?><br><br></div>
			<div class="span6"><?php echo $homeRight; ?></div>			
		</div>
		<br><br>
		<div class="row-fluid">
			<div onclick="location.href='<?php echo $url1; ?>';" class="span4 homeblock first" style="background-image: url('<?php echo $afbeelding; ?>'); cursor:pointer;"><h5><a href="<?php echo $url1; ?>"><?php echo $link1; ?></a></h5></div>
			<div onclick="location.href='<?php echo $url2; ?>';"  class="span4 homeblock second" style="background-image: url('<?php echo $afbeelding2; ?>'); cursor:pointer;"><h5><a href="<?php echo $url2; ?>"><?php echo $link2; ?></a></h5></div>
			<div onclick="location.href='<?php echo $url3; ?>';"  class="span4 homeblock third" style="background-image: url('<?php echo $afbeelding3; ?>'); cursor:pointer;"><h5><a href="<?php echo $url3; ?>"><?php echo $link3; ?></a></h5></div>
		</div>
		<br><br>
		<h1><span class="bluetxt">IN</span> ONS PAKKET</h1>
		<div class="blueline"></div>
		<br>
		<div class="row-fluid home6tb">
			<div class="span4">
				<table class="table">
				<tr>
					<td><img src="<?php echo $icoon1; ?>" alt="" class="fullimg"/></td>
					<td><h2><?php echo $icoontitel1; ?></h2><?php echo $icoontekst1; ?></td>
				</tr>
				</table>
			</div>	
			<div class="span4">
				<table class="table">
				<tr>
					<td><img src="<?php echo $icoon2; ?>" alt=""  class="fullimg"/></td>
					<td><h2><?php echo $icoontitel2; ?></h2><?php echo $icoontekst2; ?></td>
				</tr>
				</table>
			</div>	
			<div class="span4">
				<table class="table">
				<tr>
					<td><img src="<?php echo $icoon3; ?>" alt=""  class="fullimg"/></td>
					<td><h2><?php echo $icoontitel3; ?></h2><?php echo $icoontekst3; ?></td>
				</tr>
				</table>
			</div>	
		</div>
		<div class="row-fluid home6tb">
			<div class="span4">
				<table class="table">
				<tr>
					<td><img src="<?php echo $icoon4; ?>" alt="" class="fullimg" /></td>
					<td><h2><?php echo $icoontitel4; ?></h2><?php echo $icoontekst4; ?></td>
				</tr>
				</table>
			</div>	
			<div class="span4">
				<table class="table">
				<tr>
					<td><img src="<?php echo $icoon5; ?>" alt="" class="fullimg" /></td>
					<td><h2><?php echo $icoontitel5; ?></h2><?php echo $icoontekst5; ?></td>
				</tr>
				</table>
			</div>	
			<div class="span4">
				<table class="table">
				<tr>
					<td><img src="<?php echo $icoon6; ?>" alt="" class="fullimg" /></td>
					<td><h2><?php echo $icoontitel6; ?></h2><?php echo $icoontekst6; ?></td>
				</tr>
				</table>
			</div>	
		</div>
		<br><br>            
        <h1>PROJECTEN <span class="bluetxt">IN</span></h1>
		<div class="blueline"></div> 
        <div class="links">
                <a href="#" class="projcat sel" data-cat="alles">ALLES</a>
                <a href="#" class="projcat" data-cat="initiatief_fase">INITIATIEF FASE</a>
                <a href="#" class="projcat" data-cat="lopend_project">LOPEND PROJECT</a>
                <a href="#" class="projcat" data-cat="gerealiseerd">GEREALISEERD</a>
        </div>
        <br/>
        <div id="projectsArea"></div>
        <br>
        <h1><span class="bluetxt">IN</span> HET TEAM</h1>
		<div class="blueline"></div>
		<br>
		<div class="row-fluid">
			<div class="span6 teamdesc">Het team van SamenBouwen.in bestaat uit 6 ervaren professionals die u tijdens het gehele CPO Project van gedegens advies zullen voorzien.</div>
			<div class="span6"></div>
		</div>
		<?php require_once('include/team.php'); ?>           
        <br>    
        <h1><span class="bluetxt">IN</span> ONZE BELEVING</h1>
		<div class="blueline"></div>
		<br>
		<div class="row-fluid">
			<div class="span6 teamdesc">Op regelmatige basis zal er door het team van Samenbouwen.in 
            of een gastschrijver een blog worden geschereven. Schrijf u in voor 
            de nieuwsbrief en u bent er van verzekert dat u de nieuwste 
            weblog als eerste ontvangt!</div>
			<div class="span6"></div>
		</div>    
        <br>
        <div class="row-fluid">
        <?php require_once('include/latest_blogs.php');?>
        </div>
        <br>
        <h1><span class="bluetxt">IN</span> CONTACT MET</h1>
		<div class="blueline"></div>
		<br>
		<div class="row-fluid">
			<div class="span6 teamdesc">Heeft u vragen opmerkingen of ideeen? <br/>
                Neem middels onderstaand contactformulier gerust contact met ons op.<br/>
                Wij treven er naar u binnen 2 werkdagen te antwoorden.</div>
			<div class="span6"></div>
		</div>  
		<br><br>
		<div class="row-fluid">
            <div class="span12 contact_form_wrapper">
            	<?php gravity_form(1, false, false, false, '', false); ?>
            </div>          
        </div>  
	<script type="text/javascript">
		$(document).ready(function(){			
			$.ajax({
				type: 'post',
				url: '<?php echo get_template_directory_uri(); ?>/include/projects.php',
				success : function(data) {
					$('#projectsArea').html(data);
					$('#projectsArea .bluebox').hide();
					$("#projectsArea").show();
					$('#projectsArea .bluebox').each(function(i) {
						$(this).delay(200*i).fadeIn();
					});
					
				}
			});		
			$('.projcat').click(function(e){
				e.preventDefault();
				$('.projcat').removeClass('sel');
				$(this).addClass('sel');
				$("#projectsArea").fadeOut("slow");
				$.ajax({
					type: 'post',
					url: '<?php echo get_template_directory_uri(); ?>/include/projects.php?category='+$(this).attr('data-cat'),
					success : function(data) {
						$('#projectsArea').html(data);
						$("#projectsArea").fadeIn();
						$('#projectsArea .bluebox').hide();
						$('#projectsArea .bluebox').each(function(i) {
							$(this).delay(200*i).fadeIn();
						});
					}
				});					
			});			
		});
	</script>
	<?php get_footer(); ?>