// Hide unstyled content before page load.
$('html').addClass('unstyled');

$(document).ready(function() {

    // Initialize service check tabs.
    $('#servicecheck').tabs();
    
    // Initialize 'bundleHero' tabs.
    $('#vertical-tabs').tabs({ event: 'mouseover' }).tabs('rotate', 7000);
    $('#vertical-tabs a').click(function(){
        window.location = $(this).attr("data-url");
            return true;
        });

    // Now show content.
    $('html').removeClass('unstyled');
    
    
        
    // Events to trigger when input field gains focus.
    $('input, textarea').bind('focus keydown keyup', function() {
        var name = $(this).attr('name');

        // Hide input label when field has a value.
        if ($(this).val()) {
            $("label[for='" + name + "'] span").hide();
        }

        // Make the label lighter when input gains focus.
        $("label[for='" + name + "']").addClass('light-grey');

        // Show error bubble when field gains focus.
        if ($(this).hasClass('invalid')) {
            $("span[for='" + name + "']").fadeIn(100);
        } else {
            $("span[for='" + name + "']").fadeOut(100);
        }
    });


    // Events triggered when input field loses focus.
    $('input, textarea').bind('blur', function() {
        var name = $(this).attr('name');

        // Show input label when field has no value.
        if (!$(this).val()) {
            $("label[for='" + name + "'] span").fadeIn(800);
        }

        // Make the label darker when input loses focus.
        $("label[for='" + name + "']").removeClass('light-grey');

        // Hide error bubble when field loses focus.
        $("span[for='" + name + "']").fadeOut(100);
    });


    // Hide input label when field has a value.
    $('input, textarea').each(function(i) {
        var name = $(this).attr('name');
        if ($(this).val()) {
            $("label[for='" + name + "'] span").hide();
        }
    });


    // Give focus to input element when label clicked.
    $('label.placeholder').bind('click', function() {
        var name = $(this).attr('for');
        $("input[name='" + name + "']").focus();
        $("textarea[name='" + name + "']").focus();
    });
    
    
    
// Form validation.
$('form.residential').validate({
    debug: false,
    errorClass: 'invalid',
    errorElement: 'span',
    focusInvalid: false,
    highlight: function(element) {
        $(element).addClass('invalid');
    },
    messages: {
        form_line1: {
            required: 'Please complete this mandatory field.'
        },
        form_city: {
            required: 'Please complete this mandatory field.'
        },
        form_state: {
        maxlength: 'This is not a valid entry. Please check that the information is correct.',
    minlength: 'This is not a valid entry. Please check that the information is correct.',
            required: 'Please complete this mandatory field.'
        },
        form_zip: {
        digits: 'This is not a valid entry. Please check that the information is correct.',
        maxlength: 'This is not a valid entry. Please check that the information is correct.',
    minlength: 'This is not a valid entry. Please check that the information is correct.',
    required: 'Please complete this mandatory field.'
        }
    },
    rules: {
        form_line1: {
            required: true
        },
        form_city: {
            required: true
        },
        form_state: {
        maxlength: 2,
                minlength: 2,
            required: true
        },
        form_zip: {
        digits: true,
                maxlength: 5,
                minlength: 5,
            required: true
        }
    },
    showErrors: function() {

        // Highlight form element errors, handle error messages.
        if (this.settings.highlight) {
            var errorList = this.errorList;
            for (var i = 0; errorList[i]; i++) {
                this.settings.highlight.call(this, errorList[i].element, this.settings.errorClass, this.settings.validClass);

                var errorElement = this.errorsFor(errorList[i].element);
                if (errorElement.length) {

                    // Reset class to error state.
                    errorElement.removeClass().addClass(this.settings.errorClass);

                    // Is element generated? Replace message.
                    errorElement.attr('generated') && errorElement.html(errorList[i].message);
                } else {

                    // Doesn't already exist. Create it.
                    errorElement = $('<' + this.settings.errorElement + '/>')
                        .attr({
                            'for': this.idOrName(errorList[i].element),
                            'generated': true
                        })
                        .addClass(this.settings.errorClass)
                        .html(errorList[i].message)
                        .insertBefore(errorList[i].element);
                        
                        
                    errorElementPoint = $('<' + this.settings.errorElement + '/>')
                        .attr('for', this.idOrName(errorList[i].element))
                        .addClass(this.settings.errorClass + '-point')
                        .width($("input[name='" +  errorList[i].element.name + "']").width())
                        .insertAfter(errorElement);
                }
            }
        }

        // Restore form elements to original state.
        if (this.settings.unhighlight) {
            var validList = this.validElements();
            for (var i = 0; validList[i]; i++) {
                this.settings.unhighlight.call(this, validList[i], this.settings.errorClass, this.settings.validClass);
            }
        }
    },
    submitHandler: function(form) {
        form.submit();
    },
    unhighlight: function(element) {
        $(element).removeClass('invalid');
    }
});
    
// Form validation.
$('form.business').validate({
    debug: false,
    errorClass: 'invalid',
    errorElement: 'span',
    focusInvalid: false,
    highlight: function(element) {
        $(element).addClass('invalid');
    },
    messages: {
        phone_business: {
        maxlength: 'This is not a valid entry. Please check that the information is correct.',
    minlength: 'This is not a valid entry. Please check that the information is correct.',
            required: 'Please complete this mandatory field.'
        },
        state_business: {
        maxlength: 'This is not a valid entry. Please check that the information is correct.',
    minlength: 'This is not a valid entry. Please check that the information is correct.',
            required: 'Please complete this mandatory field.'
        }
    },
    rules: {
        phone_business: {
        digits: true,
                maxlength: 10,
                minlength: 10,
            required: true
        },
        state_business: {
        maxlength: 2,
                minlength: 2,
            required: true
        }
    },
    showErrors: function() {

        // Highlight form element errors, handle error messages.
        if (this.settings.highlight) {
            var errorList = this.errorList;
            for (var i = 0; errorList[i]; i++) {
                this.settings.highlight.call(this, errorList[i].element, this.settings.errorClass, this.settings.validClass);

                var errorElement = this.errorsFor(errorList[i].element);
                if (errorElement.length) {

                    // Reset class to error state.
                    errorElement.removeClass().addClass(this.settings.errorClass);

                    // Is element generated? Replace message.
                    errorElement.attr('generated') && errorElement.html(errorList[i].message);
                } else {

                    // Doesn't already exist. Create it.
                    errorElement = $('<' + this.settings.errorElement + '/>')
                        .attr({
                            'for': this.idOrName(errorList[i].element),
                            'generated': true
                        })
                        .addClass(this.settings.errorClass)
                        .html(errorList[i].message)
                        .insertBefore(errorList[i].element);
                        
                        
                    errorElementPoint = $('<' + this.settings.errorElement + '/>')
                        .attr('for', this.idOrName(errorList[i].element))
                        .addClass(this.settings.errorClass + '-point')
                        .width($("input[name='" +  errorList[i].element.name + "']").width())
                        .insertAfter(errorElement);
                }
            }
        }

        // Restore form elements to original state.
        if (this.settings.unhighlight) {
            var validList = this.validElements();
            for (var i = 0; validList[i]; i++) {
                this.settings.unhighlight.call(this, validList[i], this.settings.errorClass, this.settings.validClass);
            }
        }
    },
    submitHandler: function(form) {
        form.submit();
    },
    unhighlight: function(element) {
        $(element).removeClass('invalid');
    }
});
    
});