var aVerticals = new Array();
	var aOpdrachten = new Array();
	var aTechnieken = new Array();
	var filterArray = new Array()
	
	/*
		De businesscases hebben allemaal hidden input velden waarin
		extra informatie voor de filter-functie is opgenomen, zodat
		er client-sided gefiltreerd kan worden. 
		De onderstaande functie gaat voor elke container kijken wat de 
		inhoud is van deze velden en slaat ze op in de desbetreffende array
	*/
	
	$(function(){
		createPagers();
		
		$('#BScontent > .bsCaseContainer').each(
			function(){
				$(this).children('input[type="hidden"]').each(
					function(){	
						var sValue = $(this).attr('value')
						filterArray.push(sValue)
						if ($(this).attr('name') == 'Verticals'){
							aVerticals.push(sValue)
						}
						if ($(this).attr('name') == 'Opdrachten'){
							aOpdrachten.push(sValue)
						}
						if ($(this).attr('name') == 'Technieken'){
							aTechnieken.push(sValue)
						}
					}
				)
			}
		)
		
		/*
			Verwijderen van dubbele items uit de array's
		*/
		
		aVerticals = aVerticals.unique()
		aOpdrachten = aOpdrachten.unique()
		aTechnieken = aTechnieken.unique()
		filterArray = filterArray.unique()		
		
		/*
			Aanmaken van een tabel met daarin checkboxen met de waarden
			uit de filter arrays
		*/
			
		var sTable = ''
		sTable += '<table width="100%" border="0" cellpadding="0" cellspacing="0" class="BCTable">'
		sTable += '<col width="150" />'
		sTable += '<col width="150" />'
		sTable += '<col width="150" />'
		sTable += '<col width="*" />'
		sTable += '<tr>'
		sTable += '<th>Segment</th>'
		sTable += '<th>Opdracht</th>'
		sTable += '<th>Techniek</th>'
		sTable += '</tr>'
		sTable += '<tr><td>'
		var sUrl = window.location + '#'
		//VERTICALS
		for (i = 0; i < aVerticals.length; i++){
			sTable += '<div class="filterselection">'
			sTable += '<a href="#" class="fakecheck fakechecked" title="Verticals" id="' + aVerticals[i] +'">' + aVerticals[i] + '</a>'
			sTable += '</div>'
		}
		
		sTable += '</td><td>'
		
		//OPDRACHTEN
		for (i = 0; i < aOpdrachten.length; i++){
			sTable += '<div class="filterselection">'	 
			sTable += '<a href="#" class="fakecheck fakechecked" title="Opdrachten" id="' + aOpdrachten[i] +'">' + aOpdrachten[i] + '</a>'
			sTable += '</div>'
		}
		
		sTable += '</td><td><div class="filterwrapper">'						
		
		//TECHNIEKEN						
		//aTechnieken.push('Actionscript');
		for (i = 0; i < aTechnieken.length; i++){
			sTable += '<div class="filterselection">'
			sTable += '<a href="#" class="fakecheck fakechecked" title="Technieken" id="' + aTechnieken[i] +'">' + aTechnieken[i] + '</a>'
			sTable += '</div>'
		}
		
		sTable += '</td></tr></table>'	
		$('#BCsubmenu_body').html(sTable);
		
		/*
			Om het zaakje wat op te leuken is er gekozen voor een link met twee afbeeldingen die zich voordoet 
			als checkbox. De onderstaande code zorgt ervoor dat de afbeelding gaat werken als checkbox
		*/
		
		$(".fakecheck").click(
			function(){
				var filterItem = $(this).attr("id")
				var filterType = $(this).attr('title')
						
				if ($(this).hasClass('fakechecked')) {
					$(this).removeClass('fakechecked')
					deleteFilter(filterType, filterItem)
				} else {
					$(this).addClass('fakechecked');
					addFilter(filterType, filterItem)
				}
				
				$(this.hash).trigger("click");
				return false;
			}
	);
		
		
	})
	
	function createPagers(){
		createPager('pager_top');
		createPager('pager_bottom');		
	}
	
	function createPager(divID){
		$('#' + divID).html('');
		/*		
			De class waarbinnen de cases zitten verbreden,
			door het aantal cases door 2 te delen (er zijn twee rijen),
			en ze te vermedigvuldigen met de breedte van één case plus wat witruimte.
		*/
		
		var width = $('.bsCaseContainer').width();
		var count = $('#BScontent > .bsCaseContainer:visible').size()
		var container = 0
		if (count <= 3) {
			container = count * (width + 130)			
		} else if(count <= 6) {
			container = (2 * (width + 130)) + width
		} else {
			container = Math.ceil(count / 2) * (width + 130);
		}
		
		$('#BScontent').css("width",container);
		
		/*
			Aanmaken van een pager, door eerst het aantal blokjes 
			te berekenen (6 cases per pagina, dus totaal aantal cases
			delen door 6). Vervolgens moeten de blokjes nog een eventhandler
			krijgen, die de animatie start.
		*/
		
		var pages = Math.ceil(count / 6);
			
		if (count > 6){				
			for (var i=0;i<pages;i++){
				$('#' + divID).append('<div class="pagerItem" id="' + i +'">' + (i+1) + '</div>')
				$('.pagerItem').bind('click', StartAnimation)
			}
			
			$('#' & divID & ' > .pagerItem:first').css('background-color','#11A6CA');
		}
	}
	
	function StartAnimation(){
		var id = $(this).attr('id');
		var parentid = $(this).parent().attr('id');
		
		/*
			Achtergrond kleur van actieve blokje veranderen			
		*/	
		
		$('#pager_top > .pagerItem').each(
			function(){ 
				var tempid = $(this).attr('id')
				if (id == tempid){
					$(this).css("background-color","#11A6CA");
				} else {
					$(this).css("background-color","#999999");
				}
			}
		)
			
		$('#pager_bottom > .pagerItem').each(
			function(){ 
				var tempid = $(this).attr('id')
				if (id == tempid){
					$(this).css("background-color","#11A6CA");
				} else {
					$(this).css("background-color","#999999");
				}
			}
		)	
			
		var posnew = -(795 * id) + "px";
		$('#BScontent').animate({left:posnew},{duration:1000, easing: 'cubicEaseInOut'});
	}
		
		/*
			Wanneer op een checkbox geklikt wordt, moet allereerst het id van de checkbox opgeslagen worden, waarna er
			gefilterd kan worden op alle aangevinkte checkboxen
		*/
		
	function addFilter(sType, sItem){
		eval('a' + sType).push(sItem);
		filterArray.push(sItem)
		applyFilters(sType)
	}
	
	function deleteFilter(sType, sItem){
		eval('a' + sType).splice(eval('a' + sType).indexOf(sItem), 1);
		filterArray.splice(filterArray.indexOf(sItem), 1)
		applyFilters(sType)
	}
	
	function findFilter(sType, sItem){
	/*	
		for (i=0; i<eval('a' + sType).length; i++){
			if (eval('a' + sType)[i] == sItem){
				return true
			}
		} 
		return false;		
	*/
	
		for (i=0; i<filterArray.length; i++){
			if (filterArray[i] == sItem){
				return true;
			}			
		}
		return false	
	}
	
	function applyFilters(sType){
		$('#BScontent > .bsCaseContainer').each(
			function(){
				var sItem = $(this).children('input[name="' + sType + '"]').attr('value')
				if (findFilter(sType, sItem) == false) {
					$(this).hide();					
				} else {
					$(this).show();												
				}			
			}
		)
		createPagers();
		$('#BScontent').css({"left": "0px"});
	};