T119_SV_LP_Calculator

;(function () {
    var mobConsole = (function (result) {
        result.elem = document.createElement('div');
        result.elem.classList.add(result.cssRoot);

        result.elem.style.position = 'fixed';
        result.elem.style.background = 'white';
        result.elem.style.top = '0';
        result.elem.style.color = 'black';

        result.promise = mmcore.waitFor(function () {
            return document.body;
        });

        result.promise.done(function () {
            document.body.appendChild(result.elem);
        });

        console.log = (function(orig) {
            return function() {
                result.log.apply(result, arguments);
                return orig.apply(this, arguments)
            }
        })(console.log);

        result.elem.addEventListener('click', result.clear.bind(result));

        return result;
    })({
        cssRoot: 'mm-mob-cons',
        log: function () {
            var msg = document.createElement('p');
            msg.innerHTML = Array.prototype.slice.call(arguments, 0).join(' ');
            this.elem.appendChild(msg);
        },
        clear: function() {
            this.elem.innerHTML = '';
        }
    });

    var CAMPAIGN_NAME = 'T119_SV_LP_Calculator';
    var ELEMENTS = ['A_Chevrons'];
    var CAMPAIGN_NAMESPACE = 'mm-t119';
    var CAMPAIGN_PAGE_ID = 'T119_CAMPAIGN';

    var campaign = new mmcore.Campaign(CAMPAIGN_NAME, ELEMENTS, CAMPAIGN_NAMESPACE);

    campaign.extend({
        applyVariant: function () {
        },
        requestVariant: function () {
            var req = mmcore.request(CAMPAIGN_PAGE_ID).done(function () {
                document.body.classList.add(this.prefix);
                this.renderMaxyboxes();
                this.applyVariant();

                mmcore.IntegrationFactory.initialize('Omniture', {
                    campaign: this.name,
                    parameters: ['eVar6']
                });
            }.bind(this));

            return req;
        },
        checkGenRules: function () {
            if (!isOffer()) {
                return (new mmcore.Deferred()).reject().promise();
            }

            return waitDom();

            function isOffer() {
                var offer;

                try {
                    offer = location.search.match(/offer=([0-9]+)/)[1];
                } catch (e) {
                }

                return ['115', '167'].indexOf(offer);
            }

            function waitDom() {
                return mmcore.waitFor(function () {
                    return document.querySelector('.step-chevron-outer.last');
                })
            }
        },
        fnToStr: function (func) {
            var resultStr = /\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+/.exec(func.toString());
            return resultStr[0].replace(/(^\*|\*$)/g, '');
        }
    });

    campaign.varsModule = {
        render: function (variant) {
            var lastChevron = document.querySelector('.step-chevron-outer.last');
            var calcNode = document.createElement('div');
            var calculator = {};
            var lastVal = '';

            mmcore.AttachStyle(this.css);

            calcNode.innerHTML = this.html;
            calcNode = calcNode.querySelector('.step-chevron-outer');

            calculator.input = calcNode.querySelector('.mm-t119-field__input');
            calculator.bonus = calcNode.querySelector('.mm-t119-bonus');
            calculator.regBonus = calcNode.querySelector('.mm-t119-reg-bonus');
            calculator.sum = calcNode.querySelector('.mm-t119-total-bonus');

            calculator.input.value = lastVal;

            lastChevron.classList.remove('last');

            insertAfter(calcNode, lastChevron);

            calculator.input.addEventListener('blur', handleBlur);
            calculator.input.addEventListener('keydown', handleKey);
            calculator.input.addEventListener('keyup', handleKey);

            if (variant === 'A2') {
                calculator.input.parentNode.classList.add('mm-t119-field_low')
            }

            if (variant === 'A3') {
                calculator.input.value = 30;
                handleKey();
            }

            function insertAfter(node, refNode) {
                refNode.parentNode.insertBefore(node, refNode.nextElementSibling);
            }

            function validateKey(e) {
                var pressedKey = e.which ? e.which : event.keyCode;
                var allowedKeys = [8, 9, 13, 37, 39, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110, 188, 190];

                return allowedKeys.indexOf(pressedKey) !== -1;
            }

            function handleKey(evt) {
                console.log('evt', evt.type, calculator.input.value)

                if (evt && evt.type === 'keydown' && !validateKey(evt)) {
                    console.log('prevention', calculator.input.value)
                    evt.preventDefault();
                } else {
                    setTimeout(function() {
                        console.log('in timeout', calculator.input.value)
                        if (lastVal === calculator.input.value) {
                            return;
                        }

                        var numVal = parseInt(calculator.input.value.replace(/[^0-9]/g, ''), 10);

                        console.log('num', numVal)

                        calculator.input.value = lastVal = formatNum(numVal, true);

                        console.log('aft format', calculator.input.value)

                        recalculate(numVal);
                    }, 0);
                }
            }

            function handleBlur() {
                var val = calculator.input.value.replace(/[^0-9]/g, '');

                mmcore.SetAction('T119_Interaction ', 1, val || 'blank');
                mmcore.request();
            }

            function formatNum(number, hideCurr) {
                var result = number.toString().replace(/[^0-9]/g, '');

                if (result && !hideCurr) {
                    result = '£' + result;
                }

                return result;
            }

            function recalculate(num) {
                var bonus;

                if (!num || num < 5) {
                    calculator.bonus.innerHTML = '';
                    calculator.regBonus.innerHTML = '';
                    calculator.sum.innerHTML = '';
                    calculator.input.parentNode.classList.add('mm-t119-field_low')
                } else {
                    bonus = num * 2;
                    bonus = bonus > 1000 ? 1000 : bonus;

                    calculator.bonus.innerHTML = formatNum(bonus);
                    calculator.regBonus.innerHTML = formatNum('10');
                    calculator.sum.innerHTML = formatNum(num + bonus + 10);
                    calculator.input.parentNode.classList.remove('mm-t119-field_low')
                }
            }
        },
        html: campaign.fnToStr(function () {
            /*
            <div class="mm-t119-calc step-chevron-outer last">
                <div class="step-chevron">
                    <div class="step-chevron-inner-shadow">
                        <div class="step-chevron-inner">
                            <div class="lp-step-middle">
                                <div class="lp-step-info">
                                    <div class="mm-t119-header">
                                        DISCOVER YOUR PLAYING AMOUNT
                                    </div>
                                    <div class="mm-t119-main">
                                        <div class="mm-t119-col-1">
                                            <div class="mm-t119-top">
                                                Enter deposit<br>
                                                amount here
                                            </div>
                                            <div class="mm-t119-bot">
                                                <div class="mm-t119-field">
                                                    <input class="mm-t119-field__input" maxlength="5" pattern="\d*">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mm-t119-col-2">
                                            <div class="mm-t119-bot">+</div>
                                        </div>
                                        <div class="mm-t119-col-3">
                                            <div class="mm-t119-top">
                                                Your<br>
                                                bonus
                                            </div>
                                            <div class="mm-t119-bot mm-t119-bonus"></div>
                                        </div>
                                        <div class="mm-t119-col-4">
                                            <div class="mm-t119-top"></div>
                                            <div class="mm-t119-bot">+</div>
                                        </div>
                                        <div class="mm-t119-col-5">
                                            <div class="mm-t119-top">
                                                Registration<br>
                                                Bonus
                                            </div>
                                            <div class="mm-t119-bot mm-t119-reg-bonus"></div>
                                        </div>
                                        <div class="mm-t119-col-6">
                                            <div class="mm-t119-top"></div>
                                            <div class="mm-t119-bot">=</div>
                                        </div>
                                        <div class="mm-t119-col-7">
                                            <div class="mm-t119-top">
                                                Total<br>
                                                Balance
                                            </div>
                                            <div class="mm-t119-bot mm-t119-total-bonus"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                         */
        }),
        css: campaign.fnToStr(function () {
            /*
            .mm-t119 .mm-t119-calc .lp-step-info {
                max-width: 100%;
                width: 100%;
                margin: 0px;
                padding: 0;
            }

            .mm-t119 .step-chevron-inner {
                display: block;
            }

            .mm-t119 .mm-t119-main {
                font-size: 70%;
                line-height: 1;
                margin-top: 10px;
                width: 100%;
            }

            .mm-t119 .mm-t119-row {
                display: flex;
                align-items: center;
            }

            .mm-t119 .mm-t119-field__input {
                width: 100%;
                box-sizing: border-box;
                border: none;
                border-radius: .2em;
                outline: none;

                padding-left: .8em;

                font-size: 1.2em;
                font-weight: bold;
                height: 1.67em;
            }

            .mm-t119 .mm-t119-field {
                position: relative;
            }

            .mm-t119-field:before {
                content: '£';
                color: black;
                position: absolute;
                padding-left: .2em;
                font-size: 1.2em;

                line-height: normal;

                top: 0;
                left: 0;
                height: 100%;
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;
            }

            .mm-t119 .mm-t119-field_low:after {
                content: 'min £5 deposit';
                font-size: .6em;
                position: absolute;
                width: 100%;
                left: 0;
                top: 100%;
                padding-top: .3em;
                line-height: normal;
            }

            .mm-t119 .mm-t119-row.mm-t119-last {
                margin-top: 10px;
                padding-bottom: 1em;
            }

            .mm-t119 .mm-t119-row.mm-t119-last .mm-t119-col.mm-t119-col-7 {
                font-size: 2em
            }

            .mm-t119 .mm-t119-col.mm-t119-col-2,
            .mm-t119 .mm-t119-col.mm-t119-col-4,
            .mm-t119 .mm-t119-col.mm-t119-col-6 {
                font-size: 1em;
            }

            .mm-t119-col-1 {
                width: 24%;
            }

            .mm-t119-main {
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: flex-end;
                align-items: flex-end;
                -webkit-justify-content: space-between;
                justify-content: space-between;
            }

            .mm-t119-top {
                -webkit-align-self: flex-start;
                align-self: flex-start;
                font-size: .8em;
            }

            .mm-t119-bot {
                line-height: 2em;
                min-height: 2em;
                margin-top: 10px;
                font-size: 1.2em;
                font-weight: bold;
            }

            .mm-t119-top,
            .mm-t119-bot {
            }

            .mm-t119-col-5 {
                margin: 0 -1em;
            }

            .mm-t119-bot.mm-t119-total-bonus {
                font-size: 2em;
                line-height: 1.2em;
                min-height: 1.2em;
            }

            .mm-t119-main {
                padding-bottom: 15px;
            }

            @media only screen and (min-width: 641px) {
                .mm-t119 .page-container {
                    height: auto;
                }

                .mm-t119 .page-width {
                    text-align: right;
                }

                .mm-t119 .page-copy {
                    float: none;
                    display: inline-block;
                }
            }
        */
        })
    };

    campaign.checkGenRules().done(function () {
        campaign.requestVariant()
    });
})();