$(function(){
	// funtion to open questions in product compare tool
	// find the inputs for the filter questions that have follow up.
  
  var showCompare = $('#showcomparing').val();
  
   $('#mq1, #mq2, #mq3').find('input')
		.click(function() {
			var teaser = $(this).parents('.teaser:first');
			var id = teaser.attr('id');
			
			deactivateItems(teaser); // this function (to grey out items on the right) goes first cause then other teasers aren't open yet.
			
			// first change the appearence of the filter block
			teaser.nextAll().hide().removeClass('q-active').addClass('q-open')
				.find('input').removeAttr('checked');
			
			// open the next question, depending on the answer.
			teaser.removeClass('q-open').addClass('q-active');
			if ( $(this).val() == 'option1' ) {
				if (id == 'mq1') {
					teaser.parent().find('#mq2').slideDown(300);
				} 
				else if (id == 'mq2') {
					teaser.parent().find('#mq3').slideDown(300);
				}
				else if (id == 'mq3') {
					teaser.parent().find('#mq4').slideDown(300);
				}
			}else if ( $(this).val() == 'option2' ) {
				if (id == 'mq2') {
					teaser.parent().find('#mq3').slideDown(300);
				}
			}
			
			
		});
	
		// to make sure the last filter question that has no follow up, is also changed in layout
		$( '#mq4' ).find('input').click(function() {
			deactivateItems($(this).parents('.teaser:first'));
			$(this).parents('.teaser:first').removeClass('q-open').addClass('q-active');
		}); 
		
		$('#comparemorgage input:checkbox').click( function() {
				var boxesChecked = $('#comparemorgage input:checkbox:checked').length;
				if ( boxesChecked == 4 ) {
					$('#comparemorgage .button').attr('disabled','disabled').css('opacity',0.5);
					$('#comparemorgage .error').show();
				} else if ( boxesChecked == 3 ){
					$('#comparemorgage .button').removeAttr('disabled').css('opacity', 1);
					$('#comparemorgage .error').hide();
				}
		});
		
		// this function greys out the products that are filtered out by each question
		// it uses the id's of the rows the flow has to be inserted here under
		function deactivateItems(teaser) {
			var qitems = { 
				mq1: {
					option1: [9],
					option2: [1, 2, 3, 4, 5, 6, 7, 8]
				},
				mq2: {
					option1: [5, 6, 7, 8, 9],
					option2: [1, 2, 3, 4]	
				},
				mq3: {
					option1: [3, 4, 7, 8],
					option2: [1, 2, 4, 5, 6, 8],	
					option3: [1, 2, 3, 5, 6, 7]
				},
				mq4: {
					option1: [2, 6],
					option2: [1, 5]
				}
			}
			
			// to know which teasers are open and already answered:
			var teasers_answered = teaser.add(teaser.prevAll(':visible'));
			var total_items = [];
			
			// in case you go back up to a previous filter question
			teasers_answered.each(function(){
				var id = $(this).attr('id');
				var answer = $(this).find('input:checked').val();
				
				var items = qitems[id][answer];
				
				for (i=0;i<items.length;i++) {
					total_items.push(items[i]);
				}
			});
			

			$('#comparemorgage tr').removeClass('fadeout');
			
			for (i=0;i<total_items.length;i++) {
				$('tr#compid_' + total_items[i]).addClass('fadeout');
			}
			
			// after answering first question, show compare boxes and button
			var openBox = $('#mortgage .teaser:visible').index(teaser) + 1;
			if ( openBox == showCompare ){
				$('#comparemorgage .checkbox').show();
				$('#comparemorgage .button').show();
			} else if ( openBox < showCompare ) {
				$('#comparemorgage .checkbox').hide();
				$('#comparemorgage .button').hide();
			}
			
		}

			
});