// mix up jquery and vanilla js ftw
$(document).ready(function(){

    var modifier = "ctl00_ContentPlaceHolder1_";

    $("#"+modifier+"textFirstName").blur(function(){ checkText("FirstName"); });
    $("#"+modifier+"textSurname").blur(function(){ checkText("Surname"); });
    $("#"+modifier+"textEmail").blur(function(){ checkText("Email"); });
    $("#"+modifier+"textPhone").blur(function(){ checkText("Phone"); });
    $("#"+modifier+"textSurname").blur(function(){ checkText("Surname"); });

    function checkText(inid){
        var inputid = modifier + "text" + inid;
        var labelid = modifier + "lbl" + inid;
        var input = document.getElementById(inputid);
        var label = document.getElementById(labelid);
        $('#error' + inid).remove();
        if(label){ label.style.color = '#000000'; }
        if(input){
            if(input.value == ''){
                if(label){ label.style.color = '#ff0000'; }
                var msg = "<span class='error' id='error" + inid + "'>Field is mandatory</span>"
                $('#' + inputid).after(msg);
            }
            else if(inid == 'Email'){ checkEmail(inid); }
            else if(inid == 'Phone'){ checkPhone(inid); }
        }
    }
    
    function checkEmail(inid){
        var inputid = modifier + "text" + inid;
        var labelid = modifier + "lbl" + inid;
        var input = document.getElementById(inputid);
        var label = document.getElementById(labelid);
        $('#error' + inid).remove();
        if(label){ label.style.color = '#000000'; }
        if(input){
            if(input.value.lastIndexOf('@') != null && input.value.lastIndexOf('@') != -1){
                if(input.value.lastIndexOf('.') != null && input.value.lastIndexOf('.') != -1){
                    if(input.value.lastIndexOf('@') < input.value.lastIndexOf('.')){
                        // all is fine
                    }
                }
                else{
                    if(label){ label.style.color = '#ff0000'; }
                    var msg = "<span class='error' id='error" + inid + "'>Valid email required</span>"
                    $('#' + inputid).after(msg);
                }
            }
            else{
                if(label){ label.style.color = '#ff0000'; }
                var msg = "<span class='error' id='error" + inid + "'>Valid email required</span>"
                $('#' + inputid).after(msg);
            }
        }
    }
    
    function checkPhone(inid){
        var inputid = modifier + "text" + inid;
        var labelid = modifier + "lbl" + inid;
        var input = document.getElementById(inputid);
        var label = document.getElementById(labelid);
        $('#error' + inid).remove();
        if(label){ label.style.color = '#000000'; }
        if(input){
            // sanitize for likely characters used in phone numbers
            var num = input.value.replace(/\s+/g,'').replace('(','').replace(')','').replace('+44','0');
            // we need to make sure they have eleven digits
            if(num.replace('+44','0').length < 10 || num.replace('+44','0').length > 11){
                if(label){ label.style.color = '#ff0000'; }
                var msg = "<span class='error' id='error" + inid + "'>Valid phone number required</span>"
                $('#' + inputid).after(msg);
            }
            // very good, so we have a number with eleven digits - lets check they are uk numbers
            else if(num.split('+').length > 1){
                if(label){ label.style.color = '#ff0000'; }
                var msg = "<span class='error' id='error" + inid + "'>Valid phone number required</span>"
                $('#' + inputid).after(msg);
            }
            // is the first digit zero?
            else if(num.charAt(0) != '0'){
                if(label){ label.style.color = '#ff0000'; }
                var msg = "<span class='error' id='error" + inid + "'>Valid phone number required</span>"
                $('#' + inputid).after(msg);
            }
            // basic check, is it a number?
            else if(isNaN(num)){
                if(label){ label.style.color = '#ff0000'; }
                var msg = "<span class='error' id='error" + inid + "'>Valid phone number required</span>"
                $('#' + inputid).after(msg);
            }
            // ok, so it's a number, is it a positive number (and not zero)?
            else if(num <= 0){
                if(label){ label.style.color = '#ff0000'; }
                var msg = "<span class='error' id='error" + inid + "'>Valid phone number required</span>"
                $('#' + inputid).after(msg);
            }
            // and we're done, this should now be a proper and full uk number
            //window.alert(num.replace('+44','0').length + "  (" + num.replace('+44','0') + ")");
        }
    }

});