$(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 (id == 'mq1') {
		        if ($(this).val() == 'option2') {
		            teaser.parent().find('#mq2').slideDown(300);
		        }
		        if ($(this).val() == 'option3') {
		            teaser.parent().find('#mq3').slideDown(300);
		        }
		    }
		    else if (id == 'mq2') {
		        if ($(this).val() == 'option1') {
		            teaser.parent().find('#mq4').slideDown(300);
		        }
		    }
		    else if (id == 'mq3') {
		        if ($(this).val() == 'option1') {
		            teaser.parent().find('#mq5').slideDown(300);
		        }
		    }


		});

    // to make sure the last filter question that has no follow up, is also changed in layout
	$('#mq4, #mq5').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: ['02', '03', '04', '05', '06', '07', '08', '09'],
                option2: ['01', '06', '07', '08', '09'],
                option3: ['01', '02', '03', '04', '05']
                },
            mq2: {
                option1: ['01', '04', '05', '06', '07', '08', '09'],
                option2: ['01', '02', '03', '05', '06', '07', '08', '09'],
                option3: ['01', '02', '03', '04', '06', '07', '08', '09']
            },
            mq3: {
                option1: ['01', '02', '03', '04', '05', '08', '09'],
                option2: ['01', '02', '03', '04', '05', '06', '07', '09'],
                option3: ['01', '02', '03', '04', '05', '06', '07', '08']
            },
            mq4: {
                option1: ['01', '03', '04', '05', '06', '07', '08', '09'],
                option2: ['01', '02', '04', '05', '06', '07', '08', '09'],
                option3: []
            },
            mq5: {
                option1: ['01', '02', '03', '04', '05', '07', '08', '09'],
                option2: ['01', '02', '03', '04', '05', '06', '08', '09'],
                option3: []
            }
    }

        // 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();
        }

    }


});