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

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
	exit( 'Direct script access denied.' );
}
?>
<?php get_header(); ?>
<section id="content" <?php Avada()->layout->add_style( 'content_style' ); ?>>
	<?php while ( have_posts() ) : ?>
		<?php the_post(); ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<?php echo fusion_render_rich_snippets_for_pages(); // phpcs:ignore WordPress.Security.EscapeOutput ?>

			<?php avada_singular_featured_image(); ?>

			<div class="post-content">
				<?php the_content(); ?>
				<?php fusion_link_pages(); ?>
			</div>
			<?php if ( ! post_password_required( $post->ID ) ) : ?>
				<?php do_action( 'avada_before_additional_page_content' ); ?>
				<?php if ( class_exists( 'WooCommerce' ) ) : ?>
					<?php $woo_thanks_page_id = get_option( 'woocommerce_thanks_page_id' ); ?>
					<?php $is_woo_thanks_page = ( ! get_option( 'woocommerce_thanks_page_id' ) ) ? false : is_page( get_option( 'woocommerce_thanks_page_id' ) ); ?>
					<?php if ( Avada()->settings->get( 'comments_pages' ) && ! is_cart() && ! is_checkout() && ! is_account_page() && ! $is_woo_thanks_page ) : ?>
						<?php comments_template(); ?>
					<?php endif; ?>
				<?php else : ?>
					<?php if ( Avada()->settings->get( 'comments_pages' ) ) : ?>
						<?php comments_template(); ?>
					<?php endif; ?>
				<?php endif; ?>
				
				
				
				
				<?php do_action( 'avada_after_additional_page_content' ); ?>
			<?php endif; // Password check. ?>
		</div>
	<?php endwhile; ?>
</section>
<?php do_action( 'avada_after_content' ); ?>
<div class="dgreybg" style="min-height:862px">
	<div class="container">
		<br><br>   
		<div class="text-center">         
	        <h1>PROJECTEN <span class="bluetxt">IN</span></h1>
			<div class="blueline"></div> 
		</div>		<br>	
        <div class="links text-center">
                <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>
   </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(); ?>