var boxchooser = new function() {

    this.data = {
        "output": "",
        "label": "not sure which box is right for you?",
        "blurb": "2 quick questions and we'll suggest the best boxes for you",
        //"image": "/img/illustrations/boxchooser.gif",
        "questions": {
            "people": {
                "phrase": "how many people are you feeding?",
                "answers": ["1-2", "3-4", "4-6"]
            },
            "times": {
                "phrase": "how many times a week do you cook?",
                "answers": ["2-3", "4-5", "6-7"]
            }
        },
        "reveal": "These boxes should suit you...",
        "boxes": {
            "fruitveg": {
                "label": "fruit + veg box",
                "blurb": "Typically 7 easy-eating veg (never potatoes) and 3 fruit varieties.",
                "price": "16.95",
                "image": "http://www.riverford.co.uk/graphics_cache/f7/93/4604-finbxfrveg-2-84.jpg",
                "url": "/veg_fruit_meat_boxes/vegetable_boxes/fruit_veg_box/"
            },
            "mini fruitveg": {
                "label": "mini fruit + veg box",
                "blurb": "5 easy-eating veg (never potatoes) and 2 fruit varieties.",
                "price": "12.45",
                "image": "http://www.riverford.co.uk/graphics_cache/17/7b/4607-finbxminfrveg-2-84.jpg",
                "url": "/veg_fruit_meat_boxes/vegetable_boxes/mini_fruit_veg_box/"
            },
            "mini veg": {
                "label": "mini vegbox",
                "blurb": "More than 7 varieties in smallish portions. You'll often get potatoes, carrots and onions.",
                "price": "10.35",
                "image": "http://www.riverford.co.uk/graphics_cache/a2/d0/1255-vegbox_mini-2-84.jpg",
                "url": "/veg_fruit_meat_boxes/vegetable_boxes/mini_vegbox/"
            },
            "faves": {
                "label": "favourites vegbox",
                "blurb": "8 varieties of popular veg like tomatoes, broccoli and peppers.",
                "price": "14.65",
                "image": "http://www.riverford.co.uk/graphics_cache/59/fc/47-generic_image-2-84.jpg",
                "url": "/veg_fruit_meat_boxes/vegetable_boxes/favourites_box/"
            },
            "small veg": {
                "label": "small vegbox",
                "blurb": "A regular favourite. 8 varieties with potatoes, carrots and onions every week.",
                "price": "12.85",
                "image": "http://www.riverford.co.uk/graphics_cache/ab/45/4610-finbxsml-2-84.jpg",
                "url": "/veg_fruit_meat_boxes/vegetable_boxes/small_vegbox/"
            },
            "medium veg": {
                "label": "medium vegbox",
                "blurb": "A great family standby. 10 varieties with potatoes, carrots and onions every week.",
                "price": "15.95",
                "image": "http://www.riverford.co.uk/graphics_cache/f7/b5/4606-finbxmed-2-84.jpg",
                "url": "/veg_fruit_meat_boxes/vegetable_boxes/medium_vegbox/"
            },
            "large veg": {
                "label": "large vegbox",
                "blurb": "For the hungry family. 12 varieties with potatoes, carrots and onions every week.",
                "price": "18.85",
                "image": "http://www.riverford.co.uk/graphics_cache/f6/b7/4605-finbxlge-2-84.jpg",
                "url": "/veg_fruit_meat_boxes/vegetable_boxes/large_vegbox/"
            },
            "seasons": {
                "label": "seasons box",
                "blurb": "No potatoes here - just 8 to 10 varieties of fresh seasonal veg.",
                "price": "12.95",
                "image": "http://www.riverford.co.uk/graphics_cache/fe/fe/4609-finbxseason-2-84.jpg",
                "url": "/veg_fruit_meat_boxes/vegetable_boxes/seasons_vegbox/"
            },
		"fruit": {
			"label": "fruit box",
			"blurb": "5 fruit varieties. Order on its own or as an add-on to a vegbox.",
			"price": "10.95",
			"image": "http://www.riverford.co.uk/graphics_cache/35/c5/4611-finfruitbx-2-84.jpg",
			"url": "/veg_fruit_meat_boxes/fruit_veg_fruit_meat_boxes/fruit_box/"
			},
				"salad": {
					"label": "salad box",
					"blurb": "A lighter box with 7 varieties. You'll often get salad leaves, tomatoes and cucumber.",
					"price": "10.95",
					"image": "http://www.riverford.co.uk/graphics_cache/cc/2b/4956-box_salad-2-84.jpg",
					"url": "/veg_fruit_meat_boxes/fruit_veg_fruit_meat_boxes/fruit_box/"
				}
        },
        "suggestions": [
            {
                "people": "1-2",
                "times": "unknown",
                "boxes": ["mini fruitveg", "mini veg", "fruitveg", "faves", "small veg", "salad", "seasons"]
            },
            {
                "people": "3-4",
                "times": "unknown",
                "boxes": ["small veg", "medium veg", "large veg", "seasons", "fruitveg", "faves", "salad"]
            },
            {
                "people": "4-6",
                "times": "unknown",
                "boxes": ["medium veg", "large veg", "seasons", "fruitveg", "salad", "fruit"]
            },
            {
                "people": "1-2",
                "times": "2-3",
                "boxes": ["mini fruitveg", "mini veg"]
            },
            {
                "people": "1-2",
                "times": "4-5",
                "boxes": ["mini veg", "mini fruitveg", "faves", "salad"]
            },
            {
                "people": "1-2",
                "times": "6-7",
                "boxes": ["faves", "small veg", "seasons"]
            },
            {
                "people": "3-4",
                "times": "2-3",
                "boxes": ["small veg", "fruitveg", "faves", "salad"]
            },
            {
                "people": "3-4",
                "times": "4-5",
                "boxes": ["small veg", "medium veg", "faves", "seasons"]
            },
            {
                "people": "3-4",
                "times": "6-7",
                "boxes": ["medium veg", "large veg", "fruit"]
            },
            {
                "people": "4-6",
                "times": "2-3",
                "boxes": ["fruitveg", "medium veg", "seasons", "salad"]
            },
            {
                "people": "4-6",
                "times": "4-5",
                "boxes": ["medium veg", "large veg", "fruit"]
            },
            {
                "people": "4-6",
                "times": "6-7",
                "boxes": ["large veg", "fruit"]
            }
        ],
        "input": {
            "people": "unknown",
            "times": "unknown"
        }
    };
	
	
	this.data.image = (("https:" == document.location.protocol) ? "https://assets.riverford.co.uk/boxchooser/img/illustrations/boxchooser.gif" : "http://assets.riverford.co.uk/boxchooser/img/illustrations/boxchooser.gif");

    this.outputQuestion = function(whichQuestion) {
        var output = "";
        var question = this.data.questions[whichQuestion];
        output += '<p>'+question.phrase+'</p>';
        output += '<ol>';
        for (var i=0; i<question.answers.length; i++) {
            output += '<li class="'+whichQuestion+question.answers[i]+'">';
            output += '<a href="javascript:boxchooser.update(\''+whichQuestion+'\',\''+question.answers[i]+'\',\''+this.identifier+'\')">';
            output += '<span>';
            output += question.answers[i];
            output += '</span>';
            output += '</a>';
            output += '</li>';
        }
        output += '</ol>';
        return output;
    };

    this.update = function(whichQuestion,whichAnswer,whichIdentifier) {
        if (this.data.input[whichQuestion] == whichAnswer) {
            this.data.input[whichQuestion] = "unknown";
        } else {
            this.data.input[whichQuestion] = whichAnswer;
        }
        document.getElementById(whichIdentifier).innerHTML = this.suggest();
        $('.boxchooser .suggestions > li:nth-child(2n+1)').addClass('odd');
    };

    this.suggest = function() {
        var output = "";
        for (var i=0; i<this.data.suggestions.length; i++) {
            if (this.data.suggestions[i]['people'] == this.data.input['people'] && this.data.suggestions[i]['times'] == this.data.input['times']) {
                var boxes = this.data.suggestions[i]['boxes'];
                output += '<div class="boxlisting">';
                if (this.data.reveal) {
                    output += '<p>'+this.data.reveal+'</p>';
                }
                output += '<ul class="suggestions">';
                for (var j=0; j<boxes.length; j++) {
                    var box = boxes[j];
                    output += '<li>';
                    output += '<ol>';
                    output += '<li class="details">';
                    output += '<div class="img-unit flat-left">';
                    output += '<img src="'+this.data.boxes[box].image+'" alt="">';
                    output += '</div>';
                    output += '<h4>';
                    output += '<a href="'+this.data.boxes[box].url+'">';
                    output += this.data.boxes[box].label;
                    output += '</a>';
                    output += '</h4>';
                    output += '<p>'+this.data.boxes[box].blurb+'</p>';
                    output += '</li>';
                    output += '<li class="price">';
                    output += '<span class="cost">&pound;';
                    output += this.data.boxes[box].price;
                    output += '</span>'
                    output += '</li>';
                    output += '</ol>';
                    output += '</li>';
                }
                output += '</ul>';
                output += '</div>';
            }
        }
        return output;
    };

    this.init = function() {
        this.identifier = 'boxchooser' + (Math.round(Math.random() * 9999));
        var output = '';
        output += '<div class="boxchooser">';
    	output += '<div class="inner-container">';
    	output += '<div class="blurb">';
        output += '<h2>';
        output += '<img src="'+this.data.image+'" alt="">';
        output += this.data.label;
        output += '</h2>';
        output += '<p class="intro">'+this.data.blurb+'</p>';
        output += '</div>';
        output += '<ol class="xoxo">';
        output += '<li>' + this.outputQuestion('people') + '</li>';
        output += '<li>' + this.outputQuestion('times') + '</li>';
        output += '</ol>';
        output += '</div>';
        output += '<div id="'+this.identifier+'"></div>';
        output += '</div>';
        document.write(output);
    };

    this.init();

};
jQuery(function($) {
    $('.boxchooser .xoxo a').click(function() {
        if (!$(this).hasClass('active')) {
            $(this).parent().parent().find('a.active').removeClass('active');
        }
        $(this).toggleClass('active'); 
    });
});