$(document)
    .ready(function() {
        addClasses();
        forms();
        click();

        function addClasses() {
            $('.hidden-form input')
            $('.section-box-1')
                .addClass('hidden-forms');
            $('.section-box-1')
                .addClass('opacity-bg');
        }

        function click() {
            $('body')
                .on('click', '.first-btn', function() {
                    $('.section-box-1')
                        .addClass('start');
                })
        }

        function forms() {
            $('.hidden-form input')
                .focus(function() {
                    $(this)
                        .parent()
                        .addClass('hidden-label')

                });
            $('.hidden-form input')
                .focusout(function() {
                    if ($(this)
                            .val() == '') {
                        $(this)
                            .parent()
                            .removeClass('hidden-label')
                    }

                })

            $('.hidden-form form')
                .submit(function() {
                    var name = $('#input-name')
                        .val();
                    var $emailInput = $('#input-email');
                    var email = $emailInput.val();
                    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                    if (!re.test(String(email)
                            .toLowerCase())) {
                        $emailInput.parent()
                                   .addClass('has-error');
                        return false;
                    } else {
                        $emailInput.parent()
                                   .removeClass('has-error');
                    }

                    $.ajax({
                        url: '/subscribe',
                        type: 'POST',
                        data: {
                            name: name,
                            email: email
                        },
                        success: function() {
                            showMap();
                        },
                        error: function() {
                            showMap();
                        }
                    });
                    return false;
                })

            $('body')
                .on('click', '.second-btn', function() {
                    showMap();
                })

            function showMap() {
                $('.section-box-1')
                    .removeClass('opacity-remove')
                    .addClass('timing');
                setTimeout(function() {
                    $('.section-box-1')
                        .addClass('opacity-block')
                }, 800);
                setTimeout(function() {
                    $('[class*="section-box-"]')
                        .removeClass('active');
                    $('.section-box-map')
                        .addClass('active');
                }, 800 + 1000);
            }

        }

        window.onload = function() {
            $('.section-box-1')
                .addClass('opacity-remove');
        }

    })