<?php 
/*
 * Template Name: Projecten
 * Description: Projectenpagina
 */

if(isset($_GET['provincie'])) {
	require_once('../../../wp-load.php');
	$args = array('post__in' => array(659), 'post_type' => 'page');
	query_posts($args);
}
get_header(); ?>


<div class="aftermenubar"></div>


<?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<?php while ( have_posts() ) : the_post(); 
	
	endwhile;
	rewind_posts();
	
	$count = array();
	$ar = array(
		'category' => array('initiatief_fase','lopend_project','gerealiseerd'),
		'doelgroep' => array('starters','gezinswoningen','senioren'),
	);
	foreach($ar as $catName => $arName) {
		foreach($arName as $val) {
			$args = array(
				'post_type' => array('projecten'), 
				'post_status' => 'publish',
				'meta_query' => array( 
					array(
						'key' => $catName,
						'value' => $val,
						'compare' => 'LIKE'
					)
				)
			);
			$query = new WP_Query($args);
			$count[$val] = $query->found_posts;
			//echo '<br><br>'.$query->request;
			wp_reset_query();
		}
	}
	//var_dump($count);
?>
<style>
	.filterchk label {display:inline; }
	.filterchk input{margin-top: 0px;}
	.filterchk label.checked {font-weight:bold}
</style>
<h1>PROJECTEN <span class="bluetxt">IN</span></h1>
		<div class="blueline"></div> 

<div class="row-fluid"> 
    <div class="span4">
        <div><b>Categorieen</b></div>
        <div class="filterchk categories">
        	<?php if($count['initiatief_fase']) {?><div><input type="checkbox" id="initiatief_fase" data-cat="1" class="exclude"/> <label for="initiatief_fase">INITIATIEF FASE (<?php echo $count['initiatief_fase']?>)</label></div><?php }?>
        	<?php if($count['lopend_project']) {?><div><input type="checkbox" id="lopend_project" data-cat="1" class="exclude"/> <label for="lopend_project">LOPEND PROJECT (<?php echo $count['lopend_project']?>)</label></div><?php } ?>
        	<?php if($count['gerealiseerd']) {?><div><input type="checkbox" id="gerealiseerd" data-cat="1" class="exclude"/> <label for="gerealiseerd">GEREALISEERD (<?php echo $count['gerealiseerd']?>)</label></div><?php }?>        	
        </div>
        <br>
        <div><b>Soort woning</b></div>
        <div class="filterchk sorts">               
        	<div><input type="checkbox" id="starters" data-sort="1"/> <label for="starters">STARTERS (<?php echo $count['starters']?>)</label></div>
        	<div><input type="checkbox" id="gezinswoningen" data-sort="1"/> <label for="gezinswoningen">GEZINSWONINGEN (<?php echo $count['gezinswoningen']?>)</label></div>
        	<div><input type="checkbox" id="senioren" data-sort="1"/> <label for="senioren">SENIOREN (<?php echo $count['senioren']?>)</label></div>    	
        </div>
        <br>
        <div><b>Provincie</b></div>
        <div class="filterchk provincies"> 
<?php
	global $wpdb;
	$results = $wpdb->get_results( 'SELECT DISTINCT meta_value FROM wp_postmeta WHERE meta_key LIKE "provincie" AND meta_value <> "" ORDER BY meta_value', ARRAY_A);
	foreach($results as $result) {
		$id = str_replace(' ','_',$result['meta_value']);
		$val = $result['meta_value'];
		$args = array(
				'post_type' => array('projecten'),
				'post_status' => 'publish',
				'meta_key' => 'provincie',
				'meta_value' => $val
		);
		$query = new WP_Query($args);
		$count = $query->found_posts;
		
		echo '<div><input type="checkbox" id="'.$id.'" data-provincie="1" /> <label for="'.$id.'">'.$val.' ('.$count.')</label></div>';
	}
?>    
		</div>            
		<br>
        <div><b>Plaatsnaam</b></div>	
        <div class="filterchk cities"> 
<?php
	global $wpdb;
	$results = $wpdb->get_results( 'SELECT DISTINCT meta_value FROM wp_postmeta WHERE meta_key LIKE "plaats" AND meta_value <> "" ORDER BY meta_value', ARRAY_A);
	echo '<select name="cities"><option value="all">Alle plaatsen</option>';
	$script = 'var arAllCities = [];';
	foreach($results as $result) {
		$val = $result['meta_value'];
		$args = array(
				'post_type' => array('projecten'),
				'post_status' => 'publish',
				'meta_key' => 'plaats',
				'meta_value' => $val
		);
		$query = new WP_Query($args);
		$count = $query->found_posts;
		
		echo '<option value="'.$val.'" data-cities="1">'.$val.' ('.$count.')</option>';
		$script .= 'arAllCities[arAllCities.length] = {"val" : "'.$val.'", "count" : "'.$count.'"};';
	}
	echo '</select>';
?>    
		</div> 
<br><br>

            <div class="homeblock first"><a href="/als-collectief-in-uw-eigen-gemeente-aan-de-slag/"><h4>ALS COLLECTIEF IN<br/>UW EIGEN GEMEENTE<br/>AAN DE SLAG</h4></a></div>
            <div class="homeblock first"><a href="/wat-als-ik-grond-heb-voor-een-collectief/"><h4>WAT ALS IK GROND<br/>HEB VOOR EEN<br/>COLLECTIEF ?</h4></a></div>


        
        <br><br>
    </div>
    <div class="span8">
        <div class="entry-content-page">
        <?php the_content(); ?>
    </div>
        <div id="projectsArea"></div>
    </div>

</div>

<script type="text/javascript">
        $(document).ready(function(){  
<?php       if(!isset($_GET['provincie'])) { ?>         
            $.ajax({
                type: 'post',
                url: '<?php echo get_template_directory_uri(); ?>/include/projects-overzicht.php',
                success : function(data) {
                    $('#projectsArea').html(data);
                    $('#projectsArea .bluebox').hide();
                    $("#projectsArea").show();
                    $('#projectsArea .bluebox').each(function(i) {
                        $(this).delay(200*i).fadeIn();
                    });
                    
                }
            });
<?php } ?>            
            <?php echo $script; ?>
            var arChk = {'category':[], 'sort' : [], 'provincie' : [], 'city' : []};  
			var makeAjaxCall = function(){
				var arCat=[], arSort=[], arProvincie=[], arCity = [], i;
                for(i=0; i< arChk['category'].length; i++)
                    if(arChk['category'][i] != '')
                        arCat[arCat.length] = arChk['category'][i];
                for(i=0; i< arChk['sort'].length; i++)
                    if(arChk['sort'][i] != '')
                        arSort[arSort.length] = arChk['sort'][i];
                for(i=0; i< arChk['provincie'].length; i++)
                    if(arChk['provincie'][i] != '')
                        arProvincie[arProvincie.length] = arChk['provincie'][i].replace('_', ' ');
                for(i=0; i< arChk['city'].length; i++)
                    if(arChk['city'][i] != '')
                        arCity[arCity.length] = arChk['city'][i];
                 
                $("#projectsArea").fadeOut("slow");
                $.ajax({
                    type: 'post',
                    url: '<?php echo get_template_directory_uri(); ?>/include/projects-overzicht.php?category='+arCat.join(',')+'&sort='+arSort.join(',')
                    	+'&provincie='+arProvincie.join(',')+'&city='+arCity.join(','),
                    success : function(data) {
                        $('#projectsArea').html(data);
                        $("#projectsArea").fadeIn();
                        $('#projectsArea .bluebox').hide();
                        $('#projectsArea .bluebox').each(function(i) {
                            $(this).delay(200*i).fadeIn();
                        });
                    }
                });  
			};
              
            $('.filterchk select').change(function(){                
                arChk['city'][0] = $(this).val();
             	// fill the cities select
                var html = '<option value="all">Alle plaatsen</option>';
                for(i=0; i< arAllCities.length; i++)
                    html += '<option value="'+arAllCities[i].val+'" '+(arAllCities[i].val == $(this).val() ? 'selected' : '')+'>'+arAllCities[i].val+' ('+arAllCities[i].count+')</option>';
                $('.cities select').html(html);    
                makeAjaxCall();
            }); 
            $('.filterchk input[type="checkbox"]').click(function(e){
                var catAttr = $(this).attr('data-cat');
                var sortAttr = $(this).attr('data-sort');
                var provincieAttr = $(this).attr('data-provincie');                
                var id = $(this).attr('id'), i;
                if($(this).prop('checked')) {
                	$('label[for="'+$(this).attr('id')+'"]').addClass('checked');
                	if(typeof catAttr !== typeof undefined && catAttr !== false) 
                    	arChk['category'][arChk['category'].length] = id;
                	else if(typeof sortAttr !== typeof undefined && sortAttr !== false) 
                    	arChk['sort'][arChk['sort'].length] = id;
                	else if(typeof provincieAttr !== typeof undefined && provincieAttr !== false) 
                    	arChk['provincie'][arChk['provincie'].length] = id;
                	
                } else {
                	$('label[for="'+$(this).attr('id')+'"]').removeClass('checked');
                	if(typeof catAttr !== typeof undefined && catAttr !== false) {
                    	for(i=0; i< arChk['category'].length; i++) {
                    		if(arChk['category'][i] == id) {
                    			arChk['category'][i] = '';
                    			break;
                    		}
                    	}
                	} else if(typeof sortAttr !== typeof undefined && sortAttr !== false) {
                    	for(i=0; i< arChk['sort'].length; i++) {
                    		if(arChk['sort'][i] == id) {
                    			arChk['sort'][i] = '';
                    			break;
                    		}
                    	}
                	} else if(typeof provincieAttr !== typeof undefined && provincieAttr !== false) {
                    	for(i=0; i< arChk['provincie'].length; i++) {
                    		if(arChk['provincie'][i] == id){
                    			arChk['provincie'][i] = '';
                    			break;
                    		}
                    	}
                	}
                }
                // fill the cities select
                var html = '<option value="all">Alle plaatsen</option>';
                for(i=0; i< arAllCities.length; i++)
                    html += '<option value="'+arAllCities[i].val+'">'+arAllCities[i].val+' ('+arAllCities[i].count+')</option>';
                $('.cities select').html(html);    
                makeAjaxCall();                 
            });
            <?php if(isset($_GET['provincie'])) {
            	echo "$('#".str_replace(' ', '_', $_GET['provincie'])."').click();";
            } ?>
        });
    </script>

	<?php get_footer(); ?>