(function ()
{
    var $calc, area, sku = $('.ProductDetailsGrid').find('.ruk_rating_snippet').data('sku');

    var config = {
        '$coverage_element' : $('#ProductOtherDetails').find('.Label:contains("coverage:")').next('.Value'),
        '$handle'           : $('.qty').eq(0),
        caption             : 'We estimate that you’ll need <strong>{calculation}L</strong> for 2 coats (standard coverage)',
        footnote            : 'Calculations based on the coverage of {coverage}m<sup>2</sup> per litre. (Calculations are based on applying to a smooth surface. Coverage will vary depending on substrate and conditions)',
        calc_area_readonly  : false,
        test                : false,
        querystring_activate: false
    };

    if (config['$coverage_element'] && config['$coverage_element'].length > 0 && !isNaN(parseFloat(config['$coverage_element'].text().trim())))
        config.coverage = parseFloat(config['$coverage_element'].text().trim());
    else if (config.test) config.coverage = 0.18;

    config.units = 'metres';

    config.breakdowns = {
        'Earthborn Masonry':
            {
                sku      : [184, 185],
                constants: {litre_coverage: config.coverage || 4, container_litres: 1},
                preamble : 'The following break-down shows an estimate of how many litres of primer and paint you’ll need for the job',
                matrix   : [
                    [
                        '',
                        'Product',
                        'Primer',
                        'Masonry Paint'
                    ],
                    [
                        'First stage',
                        'Primer coat',
                        function ()
                        {
                            return (area / (config.breakdowns['Earthborn Masonry'].constants.litre_coverage * config.breakdowns['Earthborn Masonry'].constants.container_litres)).toFixed(1);
                        },
                        ''
                    ],
                    [
                        'Second stage',
                        'First paint coat with 20% primer included',
                        function ()
                        {
                            return (0.2 * (area / (config.breakdowns['Earthborn Masonry'].constants.litre_coverage * config.breakdowns['Earthborn Masonry'].constants.container_litres))).toFixed(1);
                        },
                        function ()
                        {
                            return (0.8 * (area / (config.breakdowns['Earthborn Masonry'].constants.litre_coverage * config.breakdowns['Earthborn Masonry'].constants.container_litres))).toFixed(1);
                        }
                    ],
                    [
                        'Third stage',
                        'Second paint coat',
                        '',
                        function ()
                        {
                            return (area / (config.breakdowns['Earthborn Masonry'].constants.litre_coverage * config.breakdowns['Earthborn Masonry'].constants.container_litres)).toFixed(1);
                        }
                    ],
                    [
                        function ()
                        {
                            return 'Total Litres';
                        },
                        '',
                        function ()
                        {
                            return (1.2 * (area / (config.breakdowns['Earthborn Masonry'].constants.litre_coverage * config.breakdowns['Earthborn Masonry'].constants.container_litres))).toFixed(1);
                        },
                        function ()
                        {
                            return (1.8 * (area / (config.breakdowns['Earthborn Masonry'].constants.litre_coverage * config.breakdowns['Earthborn Masonry'].constants.container_litres))).toFixed(1);
                        }
                    ]
                ]
            }
    };


    var calc_expand = function ()
    {
        $calc.toggleClass('cs-calc--expanded');

        if ($calc.hasClass('cs-calc--expanded'))
        {
            $('.cs-calc-width').focus();
            _gaq.push(['_trackEvent', 'Calculator', 'Expand']);
        }
    };

    var calc_calculate = function ()
    {
        if ($('.cs-calc-width').val() !== '' && $('.cs-calc-length').val() !== '')
        {
            area = parseFloat($('.cs-calc-width').val()) * parseFloat($('.cs-calc-length').val());
            $('.cs-calc-area').val('');
            if (!isNaN(area)) $('.cs-calc-area').val(area.toFixed(2));
        }
        else
            area = parseFloat($('.cs-calc-area').val());

        _gaq.push(['_trackEvent', 'Calculator', 'Calculate', 'Area', area]);

        if (config.hasOwnProperty('coverage'))
        {
            $('.cs-calc-response').empty();

            if (!isNaN(area))
            {
                var breakdown = null;

                $.each(config.breakdowns, function (i, m)
                {
                    console.log(m, sku, m.sku);

                    if (~$.inArray(sku, m.sku))
                    {
                        breakdown = m;
                        return false;
                    }
                });

                if (breakdown != null)
                {
                    var matrix = breakdown.matrix;

                    var $table = $('<table></table>');

                    $.each(matrix, function (i, m)
                    {
                        var $tr = $('<tr></tr>');

                        $.each(m, function (ii, mm)
                        {
                            $tr.append('<td>' + (typeof(mm) === 'function' ? mm() : mm) + '</td>');
                        });

                        $table.append($tr);

                        $table.append('<tr><td colspan="4"></td></tr>');
                    });

                    if (breakdown.preamble) $('.cs-calc-response').append('<p>' + breakdown.preamble + '</p>');
                    $('.cs-calc-response').append($table);
                    $('.cs-calc-footnote').html((breakdown.footnote || config.footnote || '').replace('{coverage}', breakdown.litre_coverage || config.coverage));
                }
                else
                {
                    var caption = config.caption || '{calculation}L';
                    $('.cs-calc-response').append('<h3>' + caption.replace('{calculation}', (area / parseFloat(config.coverage)).toFixed(2)) + '</h3>');
                    $('.cs-calc-footnote').html((config.footnote || '').replace('{coverage}', config.coverage));
                }
            }
        }
    };

    if ((!config.querystring_activate || location.search === '?calc') && config['$handle'].length > 0)
    {

        var $header = $('<div/>', {
            class: 'cs-calc-header',
            html : (config.coverage ? 'Coverage' : 'Area') + ' Calculator'
        }).on('click', calc_expand);

        var $body = $('<div/>', {class: 'cs-calc-body'})
            .append(config.coverage ? '<h3>How much do I need?<h3/>' : '')
            .append($('<label/>', {html: 'Width (m)'})
                .prop('for', 'cs-calc-width'))
            .append($('<input/>', {class: 'cs-calc-width'})
                .prop({
                    'id'  : 'cs-calc-width',
                    'type': 'number',
                    'min' : '0',
                    'step': 'any'
                })
                .keyup(calc_calculate))
            .append('<span>×</span>')
            .append($('<label/>', {html: 'Length (m)'})
                .prop('for', 'cs-calc-length'))
            .append($('<input/>', {class: 'cs-calc-length'})
                .prop({
                    'id'  : 'cs-calc-length',
                    'type': 'number',
                    'min' : '0',
                    'step': 'any'
                })
                .keyup(calc_calculate))
            .append('<span>=</span>')
            .append($('<label/>', {html: 'Area (m<sup>2</sup>)'})
                .prop('for', 'cs-calc-area'))
            .append($('<input/>', {class: 'cs-calc-area'})
                .prop('readonly', config.calc_area_readonly || !config.coverage)
                .focus(function ()
                {
                    if (!$(this).prop('disabled')) $(this).select()
                })
                .keyup(function (ev)
                {
                    if (ev.which === 9) return;
                    //console.log(ev.which);

                    $('.cs-calc-width, .cs-calc-length').val('');
                    calc_calculate();
                }))
            .append($('<div/>', {class: 'cs-calc-response'}))
            .append($('<div/>', {
                class: 'cs-calc-footnote',
                html : 'Enter the width and length' + (config.coverage ? ', or area, to calculate how much of the product you’ll need' : ' to calculate the area')
            }));

        $calc = $('<div/>', {class: 'cs-calc'}).append($header).append($body);
        config['$handle'].before($calc);
    }   
})();

$(function ()
{
    $('.cs-expander-header').click(function ()
    {
        $(this).parent().toggleClass('cs-expander--expanded');
    })
});