/*
* 2018 Areama
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@areama.net so we can send you a copy immediately.
*
*
*  @author Areama <support@areama.net>
*  @copyright  2018 Areama

*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of Areama
*/
"use strict";

(function($){
    function ArContactUs(element, options){
        this._initialized = false;
        this.settings = null;
        this.popups = [];
        this.options = $.extend({}, ArContactUs.Defaults, options);
        this.$element = $(element);
        this.x = 0;
        this.y = 0;
        this._interval;
        this._menuOpened = false;
        this._popupOpened = false;
        this._callbackOpened = false;
        this.countdown = null;
        this.svgPath = null;
        this.svgSteps = [],
        this.svgPathOpen = null;
        this.svgInitialPath = null;
        this.isAnimating = false;
        this.init();
    };
    ArContactUs.Defaults = {
        activated: false,
        pluginVersion: '2.1.3',
        wordpressPluginVersion: false,
        align: 'right',
        mode: 'regular',
        countdown: 0,
        drag: false,
        buttonText: 'Contact us',
        buttonSize: 'large',
        buttonIconSize: 24,
        menuSize: 'normal',
        buttonIcon: '<svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(-825 -308)"><g><path transform="translate(825 308)" fill="#FFFFFF" d="M 19 4L 17 4L 17 13L 4 13L 4 15C 4 15.55 4.45 16 5 16L 16 16L 20 20L 20 5C 20 4.45 19.55 4 19 4ZM 15 10L 15 1C 15 0.45 14.55 0 14 0L 1 0C 0.45 0 0 0.45 0 1L 0 15L 4 11L 14 11C 14.55 11 15 10.55 15 10Z"/></g></g></svg>',
        ajaxUrl: 'server.php',
        action: 'callback',
        phonePlaceholder: '+X-XXX-XXX-XX-XX',
        callbackSubmitText: 'Waiting for call',
        reCaptcha: false,
        reCaptchaAction: 'callbackRequest',
        reCaptchaKey: '',
        errorMessage: 'Connection error. Please try again.',
        callProcessText: 'We are calling you to phone',
        callSuccessText: 'Thank you.<br>We are call you back soon.',
        showMenuHeader: false,
        menuHeaderText: 'How would you like to contact us?',
        showHeaderCloseBtn: true,
        menuInAnimationClass: 'show-messageners-block',
        menuOutAnimationClass: '',
        eaderCloseBtnBgColor: '#787878',
        eaderCloseBtnColor: '#FFFFFF',
        items: [],
        itemsIconType: 'rounded',
        iconsAnimationSpeed: 800,
        iconsAnimationPause: 2000,
        promptPosition: 'side',
        style: null,
        itemsAnimation: null,
        popupAnimation: 'scale',
        callbackFormFields: {
            name: {
                name: 'name',
                enabled: true,
                required: true,
                type: 'text',
                label: 'Please enter your name',
                placeholder: 'Your full name'
            },
            email: {
                name: 'email',
                enabled: true,
                required: false,
                type: 'email',
                label: 'Enter your email address',
                placeholder: 'Optional field. Example: email@domain.com'
            },
            time: {
                name: 'time',
                enabled: true,
                required: false,
                type: 'dropdown',
                label: 'Please choose schedule time',
                values: [{value: 'asap', label: 'Call me ASAP'},'00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
            },
            phone: {
                name: 'phone',
                enabled: true,
                required: true,
                type: 'tel',
                label: 'Please enter your phone number',
                placeholder: '+X-XXX-XXX-XX-XX'
            },
            description: {
                name: 'description',
                enabled: true,
                required: false,
                type: 'textarea',
                label: 'Please leave a message with your request'
            }
        },
        theme: '#000000',
        callbackFormText: 'Please enter your phone number<br>and we call you back soon',
        closeIcon: '<svg width="12" height="13" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(-4087 108)"><g><path transform="translate(4087 -108)" fill="currentColor" d="M 14 1.41L 12.59 0L 7 5.59L 1.41 0L 0 1.41L 5.59 7L 0 12.59L 1.41 14L 7 8.41L 12.59 14L 14 12.59L 8.41 7L 14 1.41Z"></path></g></g></svg>',
        callbackStateIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg>'
    };
    ArContactUs.prototype.init = function(){
        if (this._initialized){
            return false;
        }
        this.destroy();
        this.settings = $.extend({}, this.options);
        this.$element.addClass('arcontactus-widget').addClass('arcontactus-message');
        if (this.settings.style == 'elastic') {
            this.$element.addClass('arcu-elastic');
        }
        if (this.settings.style == 'bubble') {
            this.$element.addClass('arcu-bubble');
        }
        if (this.settings.style.length == 0 && this.settings.popupAnimation) {
            this.$element.addClass('arcu-'+this.settings.popupAnimation);
        }
        if (this.settings.align === 'left'){
            this.$element.addClass('left');
        }else{
            this.$element.addClass('right');
        }
        if (this.settings.items.length){
            this.$element.append('<!--noindex-->');
            this._initCallbackBlock();
            if (this.settings.mode == 'regular'){
                this._initMessengersBlock();
            }
            if (this.popups.length) {
                this._initPopups();
            }
            this._initMessageButton();
            this._initPrompt();
            this._initEvents();
            var $this = this;
            setTimeout(function(){
                $this.startAnimation();
            }, this.settings.iconsAnimationPause? this.settings.iconsAnimationPause : 2000);

            this.$element.append('<!--/noindex-->');
            this.$element.addClass('active');
        }else{
            console.info('jquery.contactus:no items');
        }
        if (this.settings.style == 'elastic' || this.settings.style == 'bubble') {
            var morphEl = document.getElementById('arcu-morph-shape');
            var s = Snap(morphEl.querySelector('svg'));
            this.svgPath = s.select('path');
            this.svgPathOpen = morphEl.getAttribute('data-morph-open');
            this.svgInitialPath = this.svgPath.attr('d');
            this.svgSteps = this.svgPathOpen.split(';');
            this.svgStepsTotal = this.svgSteps.length;
        }
        this._initialized = true;
        this.$element.trigger('arcontactus.init');
    };
    ArContactUs.prototype.destroy = function(){
        if (!this._initialized){
            return false;
        }
        this.stopAnimation();
        this._removeEvents();
        this.$element.find('.arcontactus-message-button').unbind();
        this.$element.html('');
        this.$element.removeClass();
        this.$element.unbind().removeData('ar.contactus');
        this._initialized = false;
        this.$element.trigger('arcontactus.destroy');
    };
    ArContactUs.prototype._initCallbackBlock = function(){
        var $container = $('<div>', {
            class: 'callback-countdown-block',
            style: this._colorStyle()
        });
        var $close = $('<div>', {
            class: 'callback-countdown-block-close',
            style: 'background-color:' + this.settings.theme + '; color: #FFFFFF'
        });
        $close.append(this.settings.closeIcon);

        var $formBlock = $('<div>', {
            class: 'callback-countdown-block-phone'
        });
        $formBlock.append('<p>' + this.settings.callbackFormText + '</p>');

        var $form = $('<form>', {
            id: 'arcu-callback-form',
            action: this.settings.ajaxUrl,
            method: 'POST'
        });

        var $formGroup = $('<div>', {
            class: 'callback-countdown-block-form-group'
        });
        var $inputAction = $('<input>', {
            name: 'action',
            type: 'hidden',
            value: this.settings.action
        });
        var $inputGtoken = $('<input>', {
            name: 'gtoken',
            class: 'ar-g-token',
            type: 'hidden',
            value: ''
        });

        $formGroup.append($inputAction);
        $formGroup.append($inputGtoken);

        this._initCallbackFormFields($formGroup);

        var $inputContainer = $('<div>', {
            class: 'arcu-form-group arcu-form-button'
        });

        var $inputSubmit = $('<button>', {
            id: 'arcontactus-message-callback-phone-submit',
            type: 'submit',
            style: this._backgroundStyle()
        });
        $inputSubmit.text('Wyślij')

        $inputContainer.append($inputSubmit);

        $formGroup.append($inputContainer);

        var $timerBlock = $('<div>', {
            class: 'callback-countdown-block-timer'
        });

        var $timerText = $('<p>' + this.settings.callProcessText + '</p>');
        var $timer = $('<div>', {
            class: 'callback-countdown-block-timer_timer'
        });

        $timerBlock.append($timerText);
        $timerBlock.append($timer);

        var $blockSuccess = $('<div>', {
            class: 'callback-countdown-block-sorry'
        });

        var $blockSuccessText = $('<p>' + this.settings.callSuccessText + '</p>');
        $blockSuccess.append($blockSuccessText);

        $form.append($formGroup);
        $formBlock.append($form);

        $container.append($close);
        $container.append($formBlock);
        $container.append($timerBlock);
        $container.append($blockSuccess);
        this.$element.append($container);
    };
    ArContactUs.prototype._initCallbackFormFields = function($container){
        var $this = this;
        $.each($this.settings.callbackFormFields, function(index){
            var $inputContainer = $('<div>', {
                class: 'arcu-form-group arcu-form-group-type-' + $this.settings.callbackFormFields[index].type + ' arcu-form-group-' + $this.settings.callbackFormFields[index].name + ($this.settings.callbackFormFields[index].required? ' arcu-form-group-required' : ''),
            });
            var input = '<input>';
            switch($this.settings.callbackFormFields[index].type){
                case 'textarea':
                    input = '<textarea>';
                    break;
                case 'dropdown':
                    input = '<select>';
                    break;
            }
            if ($this.settings.callbackFormFields[index].label){
                var $inputLabel = $('<div>', {
                    class: 'arcu-form-label'
                });
                $inputLabel.html($this.settings.callbackFormFields[index].label);
                $inputContainer.append($inputLabel);
            }
            var $input = $(input, {
                name: $this.settings.callbackFormFields[index].name,
                class: 'arcu-form-field arcu-field-' + $this.settings.callbackFormFields[index].name,
                required: $this.settings.callbackFormFields[index].required,
                type: $this.settings.callbackFormFields[index].type == 'dropdown'? null : $this.settings.callbackFormFields[index].type,
                value: ''
            });
            $input.attr('placeholder', $this.settings.callbackFormFields[index].placeholder);
            if (typeof $this.settings.callbackFormFields[index].maxlength != 'undefined') {
                $input.attr('maxlength', $this.settings.callbackFormFields[index].maxlength);
            }
            if ($this.settings.callbackFormFields[index].type == 'dropdown'){
                $.each($this.settings.callbackFormFields[index].values, function(i){
                    var val = $this.settings.callbackFormFields[index].values[i];
                    var lbl = $this.settings.callbackFormFields[index].values[i];
                    if (typeof $this.settings.callbackFormFields[index].values[i] == 'object'){
                        var val = $this.settings.callbackFormFields[index].values[i].value;
                        var lbl = $this.settings.callbackFormFields[index].values[i].label;
                    }
                    var $option = $('<option>', {
                        value: val
                    });
                    $option.text(lbl);
                    $input.append($option);
                });
            }
            $inputContainer.append($input);
            $container.append($inputContainer);
        });
    };
    ArContactUs.prototype._initPopups = function(){
        var $this = this;
        var $container = $('<div>', {
            class: 'popups-block arcuAnimated'
        });
        var $popupListContainer = $('<div>', {
            class: 'popups-list-container'
        });
        $.each(this.popups, function(){
            var $popup = $('<div>', {
                class: 'arcu-popup',
                id: 'arcu-popup-' + this.id
            });
            var $header = $('<div>', {
                class: 'arcu-popup-header',
                style: ($this.settings.theme? ('background-color:' + $this.settings.theme) : null)
            });
            var $close = $('<div>', {
                class: 'arcu-popup-close',
                style: ($this.settings.theme? ('background-color:' + $this.settings.theme) : null)
            });
            var $back = $('<div>', {
                class: 'arcu-popup-back',
                style: ($this.settings.theme? ('background-color:' + $this.settings.theme) : null)
            });
            $close.append($this.settings.closeIcon);
            $back.append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z" class=""></path></svg>');

            $header.text(this.title);
            $header.append($close);
            $header.append($back);
            var $content = $('<div>', {
                class: 'arcu-popup-content'
            });
            $content.html(this.popupContent);

            $popup.append($header);
            $popup.append($content);
            $popupListContainer.append($popup);
        });
        $container.append($popupListContainer);
        this.$element.append($container);
    },
    ArContactUs.prototype._initMessengersBlock = function(){
        var $container = $('<div>', {
            class: 'messangers-block arcuAnimated'
        });
        var $menuListContainer = $('<div>', {
            class: 'messangers-list-container'
        });
        var $menuContainer = $('<ul>', {
            class: 'messangers-list'
        });
        if (this.settings.itemsAnimation){
            $menuContainer.addClass('arcu-'+this.settings.itemsAnimation);
        }
        if (this.settings.menuSize === 'normal' || this.settings.menuSize === 'large'){
            $container.addClass('lg');
        }
        if (this.settings.menuSize === 'small'){
            $container.addClass('sm');
        }
        this._appendMessengerIcons($menuContainer);
        if (this.settings.showMenuHeader){
            var $header = $('<div>', {
                class: 'arcu-menu-header',
                style: (this.settings.theme? ('background-color:' + this.settings.theme) : null)
            });

            $header.html(this.settings.menuHeaderText);
            if (this.settings.showHeaderCloseBtn){
                var $closeBtn = $('<div>', {
                    class: 'arcu-header-close',
                    style: 'color:' + this.settings.headerCloseBtnColor + '; background:' + this.settings.headerCloseBtnBgColor
                });

                $closeBtn.append(this.settings.closeIcon);
                $header.append($closeBtn);
            }
            $container.append($header);
            $container.addClass('has-header');
        }
        if (this.settings.itemsIconType == 'rounded'){
            $menuContainer.addClass('rounded-items');
        }else{
            $menuContainer.addClass('not-rounded-items');
        }
        $menuListContainer.append($menuContainer);
        $container.append($menuListContainer);
        if (this.settings.style == 'elastic') {
            var $svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none"><path d="M-1,0h101c0,0-97.833,153.603-97.833,396.167C2.167,627.579,100,800,100,800H-1V0z"/></svg>';
            var $svgContainer = $('<div>', {
                class: 'arcu-morph-shape',
                id: 'arcu-morph-shape',
                'data-morph-open': 'M-1,0h101c0,0,0-1,0,395c0,404,0,405,0,405H-1V0z'
            });
            $svgContainer.append($svg);
            $container.append($svgContainer);
        }else if (this.settings.style == 'bubble') {
            var $svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none"><path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z"></path><defs></defs></svg>';
            var $svgContainer = $('<div>', {
                class: 'arcu-morph-shape',
                id: 'arcu-morph-shape',
                'data-morph-open': 'M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z'
            });
            $svgContainer.append($svg);
            $container.append($svgContainer);
        }
        this.$element.append($container);
    };
    ArContactUs.prototype._appendMessengerIcons = function($container){
        var $plugin = this;
        $.each(this.settings.items, function(i){
            var $li = $('<li>', {});
            if (this.href == 'callback'){
                var $item = $('<div>', {
                    class: 'messanger call-back ' + (this.class? this.class : '')
                });
            }else if(this.href == '_popup'){
                $plugin.popups.push(this);
                var $item = $('<div>', {
                    class: 'messanger arcu-popup-link ' + (this.class? this.class : ''),
                    'data-id': (this.id? this.id : null),
                });
            }else{
                var $item = $('<a>', {
                    class: 'messanger ' + (this.class? this.class : '') + (this.addons? ' has-addon ' : ''),
                    id: (this.id? this.id : null),
                    rel: 'nofollow noopener',
                    href: this.href,
                    target: (this.target? this.target : '_blank')
                });
                if (this.onClick){
                    var $this = this;
                    $item.on('click', function(e){
                        $this.onClick(e);
                    });
                }
            }
            if (this.addons){
                $.each(this.addons, function(ii){
                    var $addon = $('<a>', {
                        href: this.href,
                        title: (this.title? this.title : null),
                        target: (this.target? this.target : '_blank'),
                        class: (this.class? this.class : 'arcu-addon'),
                        style: (this.color? ('color:' + this.color) : null) + '; background-color: transparent'
                    });
                    if (this.icon) {
                        if (this.icon.indexOf('<') === 0){
                            $addon.append(this.icon);
                        }else if(this.icon.indexOf('<') === -1){
                            var $icon = $('<img>', {
                                src: this.icon
                            });
                            $addon.append($icon);
                        }
                    }
                    if (this.onClick){
                        var $this = this;
                        $addon.on('click', function(e){
                            return $this.onClick(e);
                        });
                    }
                    $item.append($addon);
                });
            }
            if ($plugin.settings.itemsIconType == 'rounded'){
                if (this.noContainer){
                    var $icon = $('<span>', {
                        style: ((this.color)? ('color:' + this.color + '; fill: ' + this.color) : null),
                        class: 'no-container'
                    });
                }else{
                    var $icon = $('<span>', {
                        style: ((this.color && !this.noContainer)? ('background-color:' + this.color) : null)
                    });
                }
            }else{
                if (this.noContainer){
                    var $icon = $('<span>', {
                        style: ((this.color)? ('color:' + this.color + '; fill: ' + this.color) : null),
                        class: 'no-container'
                    });
                }else{
                    var $icon = $('<span>', {
                        style: ((this.color && !this.noContainer)? ('color:' + this.color) : null) + '; background-color: transparent'
                    });
                }
            }
            $icon.append(this.icon);
            $item.append($icon);
            var $label = $('<div>', {
                class: 'arcu-item-label'
            });
            var $title = $('<div>', {
                class: 'arcu-item-title'
            });
            $title.text(this.title);
            $label.append($title);
            if (typeof this.subTitle != 'undefined' && this.subTitle){
                var $subTitle = $('<div>', {
                    class: 'arcu-item-subtitle'
                });
                $subTitle.text(this.subTitle);
                $label.append($subTitle);
            }

            $item.append($label);
            $li.append($item);
            $container.append($li);
        });
    };
    ArContactUs.prototype._initMessageButton = function(){
        var $this = this;
        var $container = $('<div>', {
            class: 'arcontactus-message-button',
            style: this._backgroundStyle()
        });
        if (this.settings.buttonSize === 'large'){
            this.$element.addClass('lg');
        }
        if (this.settings.buttonSize === 'huge'){
            this.$element.addClass('hg');
        }
        if (this.settings.buttonSize === 'medium'){
            this.$element.addClass('md');
        }
        if (this.settings.buttonSize === 'small'){
            this.$element.addClass('sm');
        }
        var $static = $('<div>', {
            class: 'static'
        });
        var $staticContent = $('<div>', {
            class: 'img-' + this.settings.buttonIconSize
        });
        $staticContent.append(this.settings.buttonIcon);
        if (this.settings.buttonText !== false){
            $staticContent.append('<p>' + this.settings.buttonText + '</p>');
        }else{
            $container.addClass('no-text');
        }
        $static.append($staticContent);
        var $callBackState = $('<div>', {
            class: 'callback-state',
            style: $this._colorStyle()
        });

        $callBackState.append(this.settings.callbackStateIcon);

        var $icons = $('<div>', {
            class: 'icons hide'
        });

        var $iconsLine = $('<div>', {
            class: 'icons-line'
        });

        $.each(this.settings.items, function(i){
            var $icon = $('<span>', {
                style: $this._colorStyle()
            });
            $icon.append(this.icon);
            $iconsLine.append($icon);
        });

        $icons.append($iconsLine);


        var $close = $('<div>', {
            class: 'arcontactus-close'
        });

        $close.append(this.settings.closeIcon);

        var $pulsation = $('<div>', {
            class: 'pulsation',
            style: $this._backgroundStyle()
        });

        var $pulsation2 = $('<div>', {
            class: 'pulsation',
            style: $this._backgroundStyle()
        });

        $container.append($static).append($callBackState).append($icons).append($close).append($pulsation).append($pulsation2);

        this.$element.append($container);
    };

    ArContactUs.prototype._initPrompt = function(){
        var $container = $('<div>', {
            class: 'arcontactus-prompt arcu-prompt-' + this.settings.promptPosition
        });
        var $close = $('<div>', {
            class: 'arcontactus-prompt-close',
            style: this._backgroundStyle() + '; color: #FFFFFF'
        });
        $close.append(this.settings.closeIcon);

        var $inner = $('<div>', {
            class: 'arcontactus-prompt-inner',
        });

        $container.append($close).append($inner);

        this.$element.append($container);
    };

    ArContactUs.prototype._initEvents = function(){
        var $el = this.$element;
        var $this = this;
        $el.find('.arcontactus-message-button').on('mousedown', function(e) {
            $this.x = e.pageX;
            $this.y = e.pageY;
        }).on('mouseup', function(e) {
            if (($this.settings.drag && e.pageX === $this.x && e.pageY === $this.y) || !$this.settings.drag) {
                if ($this.settings.mode == 'regular'){
                    if (!$this._menuOpened && !$this._popupOpened && !$this._callbackOpened) {
                        $this.openMenu();
                    }else{
                        if ($this._menuOpened){
                            $this.closeMenu();
                        }
                        if ($this._popupOpened){
                            $this.closePopup();
                        }
                    }
                }else{
                    $this.openCallbackPopup();
                }
                e.preventDefault();
            }
        });
        if (this.settings.drag){
            $el.draggable();
            $el.get(0).addEventListener('touchmove', function(event) {
                var touch = event.targetTouches[0];
                // Place element where the finger is
                $el.get(0).style.left = touch.pageX-25 + 'px';
                $el.get(0).style.top = touch.pageY-25 + 'px';
                event.preventDefault();
            }, false);
        }
        $(document).on('click', function(e) {
            $this.closeMenu();
            $this.closePopup();
        });
        $el.on('click', function(e){
            e.stopPropagation();
        });
        $el.find('.call-back').on('click', function() {
            $this.openCallbackPopup();
        });
        $el.find('.arcu-popup-link').on('click', function() {
            var id = $(this).data('id');
            $this.openPopup(id);
        });
        $el.find('.arcu-header-close').on('click', function() {
            $this.closeMenu();
        });
        $el.find('.arcu-popup-close').on('click', function() {
            $this.closePopup();
        });
        $el.find('.arcu-popup-back').on('click', function() {
            $this.closePopup();
            $this.openMenu();
        });

        $el.find('.callback-countdown-block-close').on('click', function() {
            if ($this.countdown != null) {
                clearInterval($this.countdown);
                $this.countdown = null;
            }
            $this.closeCallbackPopup();
        });
        $el.find('.arcontactus-prompt-close').on('click', function() {
            $this.hidePrompt();
        });
        $el.find('#arcu-callback-form').on('submit', function(event) {
            event.preventDefault();
            $el.find('.callback-countdown-block-phone').addClass('ar-loading');
            if ($this.settings.reCaptcha) {
                grecaptcha.execute($this.settings.reCaptchaKey, {
                    action: $this.settings.reCaptchaAction
                }).then(function(token) {
                    $el.find('.ar-g-token').val(token);
                    $this.sendCallbackRequest();
                });
            }else{
                $this.sendCallbackRequest();
            }
        });
        setTimeout(function(){
            $this._processHash();
        },500);
        $(window).on('hashchange', function(event){
            $this._processHash();
        });
    };
    ArContactUs.prototype._removeEvents = function(){
        $(document).unbind('click');
    };
    ArContactUs.prototype._processHash = function(){
        var hash =  window.location.hash;
        var $this = this;
        switch(hash){
            case '#callback-form':
            case 'callback-form':
                $this.openCallbackPopup();
                break;
            case '#callback-form-close':
            case 'callback-form-close':
                $this.closeCallbackPopup();
                break;
            case '#contactus-menu':
            case 'contactus-menu':
                $this.openMenu();
                break;
            case '#contactus-menu-close':
            case 'contactus-menu-close':
                $this.closeMenu();
                break;
            case '#contactus-hide':
            case 'contactus-hide':
                $this.hide();
                break;
            case '#contactus-show':
            case 'contactus-show':
                $this.show();
                break;
        }
    },
    ArContactUs.prototype._callBackCountDownMethod = function(){
        var secs = this.settings.countdown;
        var $el = this.$element;
        var $this = this;
        var ms = 60;
        $el.find('.callback-countdown-block-phone, .callback-countdown-block-timer').toggleClass('display-flex');
        this.countdown = setInterval(function() {
            ms = ms - 1;
            var fsecs = secs;
            var fms = ms;
            if (secs < 10) {
                fsecs = "0" + secs;
            }
            if (ms < 10) {
                fms = "0" + ms;
            }
            var format = fsecs + ":" + fms;
            $el.find('.callback-countdown-block-timer_timer').html(format);
            if (ms === 0 && secs === 0) {
                clearInterval($this.countdown);
                $this.countdown = null;
                $el.find('.callback-countdown-block-sorry, .callback-countdown-block-timer').toggleClass('display-flex');
            }
            if (ms === 0) {
                ms = 60;
                secs = secs - 1;
            }
        }, 20);
    };
    ArContactUs.prototype.sendCallbackRequest = function(){
        var $this = this;
        var $el = $this.$element;
        this.$element.trigger('arcontactus.beforeSendCallbackRequest');
        $.ajax({
            url: $this.settings.ajaxUrl,
            type: "POST",
            dataType: 'json',
            data: $el.find('form').serialize(),
            success: function(data) {
                if ($this.settings.countdown){
                    $this._callBackCountDownMethod();
                }
                $el.find('.callback-countdown-block-phone').removeClass('ar-loading');
                if (data.success) {
                    if (!$this.settings.countdown){
                        $el.find('.callback-countdown-block-sorry, .callback-countdown-block-phone').toggleClass('display-flex');
                    }
                } else {
                    if (data.errors){
                        var errors = data.errors.join("\n\r");
                        alert(errors);
                    }else{
                        alert($this.settings.errorMessage);
                    }
                }
                $this.$element.trigger('arcontactus.successCallbackRequest', data);
            },
            error: function(){
                $el.find('.callback-countdown-block-phone').removeClass('ar-loading');
                alert($this.settings.errorMessage);
                $this.$element.trigger('arcontactus.errorCallbackRequest');
            }
        });
    };
    ArContactUs.prototype.show = function(){
        this.$element.addClass('active');
        this.$element.trigger('arcontactus.show');
    };
    ArContactUs.prototype.hide = function(){
        this.$element.removeClass('active');
        this.$element.trigger('arcontactus.hide');
    };
    ArContactUs.prototype.openPopup = function(id){
        this.closeMenu();
        var $el = this.$element;
        $el.find('#arcu-popup-' + id).addClass('show-messageners-block');
        if (!$el.find('#arcu-popup-' + id).hasClass('popup-opened')) {
            this.stopAnimation();
            $el.addClass('popup-opened');
            $el.find('#arcu-popup-' + id).addClass(this.settings.menuInAnimationClass);
            $el.find('.arcontactus-close').addClass('show-messageners-block');
            $el.find('.icons, .static').addClass('hide');
            $el.find('.pulsation').addClass('stop');
            this._popupOpened = true;
            this.$element.trigger('arcontactus.openPopup');
        }
    },
    ArContactUs.prototype.closePopup = function(){
        var $el = this.$element;
        if ($el.find('.arcu-popup').hasClass('show-messageners-block')) {
            setTimeout(function(){
                $el.removeClass('popup-opened');
            }, 150);
            $el.find('.arcu-popup').removeClass(this.settings.menuInAnimationClass).addClass(this.settings.menuOutAnimationClass);
            setTimeout(function(){
                $el.removeClass('popup-opened');
            }, 150);
            $el.find('.arcontactus-close').removeClass('show-messageners-block');
            $el.find('.icons, .static').removeClass('hide');
            $el.find('.pulsation').removeClass('stop');
            this.startAnimation();
            this._popupOpened = false;
            this.$element.trigger('arcontactus.closeMenu');
        }
    },
    ArContactUs.prototype.openMenu = function(){
        if (this.settings.mode == 'callback'){
            console.log('Widget in callback mode');
            return false;
        }
        if (this.settings.style == 'elastic' || this.settings.style == 'bubble'){
            jQuery('body').addClass('arcu-show-menu').addClass('arcu-menu-' + this.settings.align);
            jQuery('body').addClass('arcu-pushed');
        }
        var $el = this.$element;
        var $this = this;
        if (!$el.find('.messangers-block').hasClass(this.settings.menuInAnimationClass)) {
            this.stopAnimation();
            $el.addClass('open');
            $el.find('.messangers-block').addClass(this.settings.menuInAnimationClass);
            $el.find('.arcontactus-close').addClass('show-messageners-block');
            $el.find('.icons, .static').addClass('hide');
            $el.find('.pulsation').addClass('stop');
            this._menuOpened = true;
            this.$element.trigger('arcontactus.openMenu');
        }
        if (this.settings.style == 'elastic') {
            this.svgPath.animate({
                path: this.svgPathOpen
            }, 400, mina.easeinout, function() {
                $this.isAnimating = false;
            });
        }else if(this.settings.style == 'bubble') {
            var pos = 0,
            nextStep = function( pos ) {
                if( pos > $this.svgStepsTotal - 1 ) {
                    //isAnimating = false;
                    return;
                }
                $this.svgPath.animate({
                    path: $this.svgSteps[pos]
                }, pos === 0 ? 400 : 500, pos === 0 ? mina.easein : mina.elastic, function() {
                    nextStep(pos);
                });
                pos++;
            };

            nextStep(pos);
        }
    };
    ArContactUs.prototype.closeMenu = function(){
        if (this.settings.mode == 'callback'){
            console.log('Widget in callback mode');
            return false;
        }
        if (this.settings.style == 'elastic' || this.settings.style == 'bubble'){
            jQuery('body').removeClass('arcu-show-menu').removeClass('arcu-menu-' + this.settings.align);
            setTimeout(function(){
                jQuery('body').removeClass('arcu-pushed');
            }, 500);
        }
        var $el = this.$element;
        var $this = this;
        if ($el.find('.messangers-block').hasClass(this.settings.menuInAnimationClass)) {
            setTimeout(function(){
                $el.removeClass('open');
            }, 150);
            $el.find('.messangers-block').removeClass(this.settings.menuInAnimationClass).addClass(this.settings.menuOutAnimationClass);
            setTimeout(function(){
                $el.find('.messangers-block').removeClass($this.settings.menuOutAnimationClass);
            }, 1000);
            $el.find('.arcontactus-close').removeClass('show-messageners-block');
            $el.find('.icons, .static').removeClass('hide');
            $el.find('.pulsation').removeClass('stop');
            this.startAnimation();
            this._menuOpened = false;
            this.$element.trigger('arcontactus.closeMenu');
        }
        if (this.settings.style == 'elastic' || this.settings.style == 'bubble') {
            setTimeout(function() {
                // reset path
                $this.svgPath.attr('d', $this.svgInitialPath);
                $this.isAnimating = false;
            }, 300);
        }
    };
    ArContactUs.prototype.toggleMenu = function(){
        var $el = this.$element;
        this.hidePrompt();
        if ($el.find('.callback-countdown-block').hasClass('display-flex')){
            return false;
        }
        if (!$el.find('.messangers-block').hasClass(this.settings.menuInAnimationClass)) {
            this.openMenu();
        }else{
            this.closeMenu();
        }
        this.$element.trigger('arcontactus.toggleMenu');
    };
    ArContactUs.prototype.openCallbackPopup = function(){
        var $el = this.$element;
        $el.addClass('opened');
        this.closeMenu();
        this.stopAnimation();
        $el.find('.icons, .static').addClass('hide');
        $el.find('.pulsation').addClass('stop');
        $el.find('.callback-countdown-block-phone, .callback-countdown-block-sorry, .callback-countdown-block-timer').removeClass('display-flex');
        $el.find('.callback-countdown-block').addClass('display-flex');
        $el.find('.callback-countdown-block-phone').addClass('display-flex');
        $el.find('.callback-state').addClass('display-flex');
        this._callbackOpened = true;
        this.$element.trigger('arcontactus.openCallbackPopup');
    };
    ArContactUs.prototype.closeCallbackPopup = function(){
        var $el = this.$element;
        $el.removeClass('opened');
        $el.find('.messangers-block').removeClass(this.settings.menuInAnimationClass);
        $el.find('.arcontactus-close').removeClass('show-messageners-block');
        $el.find('.icons, .static').removeClass('hide');
        $el.find('.pulsation').removeClass('stop');
        $el.find('.callback-countdown-block').removeClass('display-flex');
        $el.find('.callback-state').removeClass('display-flex');
        this.startAnimation();
        this._callbackOpened = false;
        this.$element.trigger('arcontactus.closeCallbackPopup');
    };
    ArContactUs.prototype.startAnimation = function(){
        var $el = this.$element;
        var $container = $el.find('.icons-line');
        var $static = $el.find('.static');
        var width = $el.find('.icons-line>span:first-child').width();
        var offset = width + 40;
        if (this.settings.buttonSize === 'huge'){
            var xOffset = 2;
            var yOffset = 0;
        }
        if (this.settings.buttonSize === 'large'){
            var xOffset = 2;
            var yOffset = 0;
        }
        if (this.settings.buttonSize === 'medium'){
            var xOffset = 4;
            var yOffset = -2;
        }
        if (this.settings.buttonSize === 'small'){
            var xOffset = 4;
            var yOffset = -2;
        }
        var iconsCount = $el.find('.icons-line>span').length;
        var step = 0;
        this.stopAnimation();
        if (this.settings.iconsAnimationSpeed === 0){
            return false;
        }
        var $this = this;
        this._interval = setInterval(function(){
            if (step === 0){
                $container.parent().removeClass('hide');
                $static.addClass('hide');
            }
            var x = offset * step;
            var translate = 'translate(' + (-(x+xOffset)) + 'px, ' + yOffset + 'px)';
            $container.css({
                "-webkit-transform":translate,
                "-ms-transform":translate,
                "transform":translate
            });
            step++;
            if (step > iconsCount){
                if (step > iconsCount + 1){
                    if ($this.settings.iconsAnimationPause){
                        $this.stopAnimation();
                        setTimeout(function(){
                            if ($this._callbackOpened || $this._menuOpened || $this._popupOpened){
                                return false;
                            }
                            $this.startAnimation();
                        }, $this.settings.iconsAnimationPause);
                    }
                    step = 0;
                }
                $container.parent().addClass('hide');
                $static.removeClass('hide');
                var translate = 'translate(' + (-xOffset) + 'px, ' + yOffset + 'px)';
                $container.css({
                    "-webkit-transform":translate,
                    "-ms-transform":translate,
                    "transform":translate
                });
            }
        }, this.settings.iconsAnimationSpeed);
    };
    ArContactUs.prototype.stopAnimation = function(){
        clearInterval(this._interval);
        var $el = this.$element;
        var $container = $el.find('.icons-line');
        var $static = $el.find('.static');
        $container.parent().addClass('hide');
        $static.removeClass('hide');
        var translate = 'translate(' + (-2) + 'px, 0px)';
        $container.css({
            "-webkit-transform":translate,
            "-ms-transform":translate,
            "transform":translate
        });
    };
    ArContactUs.prototype.showPrompt = function(data){
        var $promptContainer = this.$element.find('.arcontactus-prompt');
        if (data && data.content){
            $promptContainer.find('.arcontactus-prompt-inner').html(data.content);
        }
        $promptContainer.addClass('active');
        this.$element.trigger('arcontactus.showPrompt');
    };
    ArContactUs.prototype.hidePrompt = function(){
        var $promptContainer = this.$element.find('.arcontactus-prompt');
        $promptContainer.removeClass('active');
        this.$element.trigger('arcontactus.hidePrompt');
    };
    ArContactUs.prototype.showPromptTyping = function(){
        var $promptContainer = this.$element.find('.arcontactus-prompt');
        $promptContainer.find('.arcontactus-prompt-inner').html('');
        this._insertPromptTyping();
        this.showPrompt({});
        this.$element.trigger('arcontactus.showPromptTyping');
    };
    ArContactUs.prototype._insertPromptTyping = function(){
        var $promptContainer = this.$element.find('.arcontactus-prompt-inner');
        var $typing = $('<div>', {
            class: 'arcontactus-prompt-typing'
        });
        var $item = $('<div>');
        $typing.append($item);
        $typing.append($item.clone());
        $typing.append($item.clone());
        $promptContainer.append($typing);
    };
    ArContactUs.prototype.hidePromptTyping = function(){
        var $promptContainer = this.$element.find('.arcontactus-prompt');
        $promptContainer.removeClass('active');
        this.$element.trigger('arcontactus.hidePromptTyping');
    };
    ArContactUs.prototype.getSettings = function(){
        console.log(this.settings);
    };
    ArContactUs.prototype.getVersion = function(){
        console.log(this.settings.pluginVersion);
    };
    ArContactUs.prototype._backgroundStyle = function(){
        return 'background-color: ' + this.settings.theme;
    };
    ArContactUs.prototype._colorStyle = function(){
        return 'color: ' + this.settings.theme;
    };
    $.fn.contactUs = function(option){
        var args = Array.prototype.slice.call(arguments, 1);
        return this.each(function() {
            var $this = $(this),
                data = $this.data('ar.contactus');

            if (!data) {
                data = new ArContactUs(this, typeof option == 'object' && option);
                $this.data('ar.contactus', data);
            }

            if (typeof option == 'string' && option.charAt(0) !== '_') {
                data[option].apply(data, args);
            }
        });
    };
    $.fn.contactUs.Constructor = ArContactUs;
}(jQuery));