<script>

    function createCookie(name,value,days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function eraseCookie(name) {
        createCookie(name,"",-1);
    }

    function validateEmail(email) {
        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,}))$/;
        return re.test(email);
    }

    $("form").addClass('js');
    var formname = $("form.autofill").first().attr('id');
    
    //console.log(formname);
    if(formname) {
       
        // on pageload read the cookie and write the values to the form
        if(readCookie(formname)) {
            form_array = unescape(readCookie(formname)).split(',');
            
            var i = 0;
            $( "input[type='text'], input[type='number'], input[type='email'], textarea, select, input[type='radio'], input[type='checkbox']" ).each(function(){
                if(form_array[i]) {
                
                if($(this).is("input[type='radio']") || $(this).is("input[type='checkbox']")) {
                    if ($(this).val() == form_array[i]) {
                    if(!$(this).attr('checked')) $(this).click();
                    } else {
                    if($(this).attr('checked')) $(this).click();
                    }
                } else {
                    $(this).val(form_array[i]);
                    $(this).parent().addClass('active');
                }

                if ($(this).val()!='' && typeof $(this).attr('required') !== typeof undefined && $(this).attr('required') !== false) {
                    if($(this).is("input[type='email']" )) {
                    if (validateEmail($(this).val())) {
                        $(this).addClass('isvalid');
                    } else {
                        $(this).removeClass('isvalid');
                    }
                    } else {
                    $(this).addClass('isvalid');
                    }
                }
                }
                i++;
            });
        }

    
        /* input label helper - blur */
        $( "input[type='text'], input[type='number'], input[type='email'], textarea, select, input[type='radio'], input[type='checkbox']" ).blur( function() {
            

            //store data in cookie
            eraseCookie(formname);
            var form_array = [];
            var i = 0;
            $( "input[type='text'], input[type='number'], input[type='email'], textarea, select, input[type='radio'], input[type='checkbox']" ).each(function(){
            if($(this).is("input[type='radio']") || $(this).is("input[type='checkbox']")) {
                if ($(this).is('input:checked')) {
                form_array[i] = $(this).val();
                }
                else form_array[i] = '-';
            } else {
                form_array[i] = $(this).val();
            }
            i++;
            });
            createCookie(formname,escape(form_array.join(',')),30);
        
            //remove active class for empty inputs
            if($(this).val()=='') $(this).parent().removeClass('active');
        });
    }  

    /* input label helper - focus */
    $( "input[type='text'], input[type='number'], input[type='email'], textarea" ).focus( function() {
        $(this).parent().addClass('active');
    });
    
    $( "input[type='text'], input[type='number'], input[type='email'], textarea, select, input[type='checkbox']" ).blur( function() {
        if(typeof $(this).attr('required') !== typeof undefined && $(this).attr('required') !== false) {
        //precheck required fields
        if ($(this).val()!='') {
            if($(this).is("input[type='email']" )) {
            if (validateEmail($(this).val())) {
                $(this).addClass('isvalid');
            } else {
                $(this).removeClass('isvalid');
                $(this).addClass('error');
            }
            } else {
            $(this).addClass('isvalid');
            }
        } else {
            $(this).removeClass('isvalid');
            $(this).addClass('error');
        }
        }
    });
    
    // remove error class on click
    $( "input, textarea" ).click( function() {
        $(this).removeClass('error');
    });
    
    // javascript errors on submit (instead of HTML5)
    $('form input[type="submit"]').on('click', function(e){
        var error = 0;
        if($('#input_signature').val()!='') {
        //do nothing
        } else {
        $('#signature').addClass('error');
        error = 1;
        }
        $( "input[type='text'], input[type='number'], input[type='email'], textarea" ).each( function() {
        if (typeof $(this).attr('required') !== typeof undefined && $(this).attr('required') !== false) {
            if($(this).val()!='') { 
            if($(this).is("input[type='email']" )) {
                if (validateEmail($(this).val())) {
                //do nothing
                } else {
                $(this).addClass('error');
                error = 1;
                }
            }
            } else {
            $(this).addClass('error');
            error = 1;
            }
        }
        });
        if (error==1) {
        e.preventDefault();
        
        //scroll to the first error
        $('html, body').animate({
            scrollTop: ($('.error:visible:first').offset().top - 150) // 150px is an arbitrary amount to have the field better centered
        }, 300);
        }
        else {
		$(eraseCookie(formname));
		}
    });

    $( document ).ready(function() {
        $(".product select").val($(".product select option:first").val());
    });
</script>
<style>
    
form input[type="number"].isvalid, 
form input[type="email"].isvalid, 
form textarea.isvalid, 
form input[type="text"].isvalid, 
form select.isvalid {
    background: white url('/img/check.svg') calc(100% - 10px) center no-repeat; background-size: 15px auto;
}
form input[type="number"]:-moz-submit-invalid,
form input[type="email"]:-moz-submit-invalid, 
form textarea:-moz-submit-invalid, 
form input[type="text"]:-moz-submit-invalid, 
form select:-moz-submit-invalid, 
form input:-moz-ui-invalid {
    -moz-box-shadow: 0 0 2px 1px #e21a23!important;
    -webkit-box-shadow: 0 0 2px 1px #e21a23!important;
    box-shadow: 0 0 2px 1px #e21a23!important;
}
form .error {
    -moz-box-shadow: 0 0 2px 1px #e21a23!important;
    -webkit-box-shadow: 0 0 2px 1px #e21a23!important;
    box-shadow: 0 0 2px 1px #e21a23!important;
}
</style>