window.addEvent('domready', function() {
    didSubmit = false;
    $$('.rollPage').each(
		    function(btn) {
		        btn.addEvent('mouseenter', function() {
		            show(btn.get('id'))
		            $$('.headerArrow').each(
		                function(arrow) {
		                    if (arrow.getParent().get('id') == btn.get('id')) {
		                        arrow.setStyle('visibility', 'visible');
		                    } else {
		                        arrow.setStyle('visibility', 'hidden');
		                    }
		                }
		            )
		        })
		    });

    $('email').onkeyup = function() {
        if ($('email').get('value').clean().test(/^(?:\w+\.?)*\w+@(?:\w+\.)+\w+$/)) {
            correct('email')
        } else { error('email') }
    }
    $('phone').onkeyup = function() {
        if ($('phone').get('value').clean().test(/^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/)) {
            correct('phone')
        } else { error('phone') }
    }
    $('first').onkeyup = function() {
        if ($('first').get('value').clean().length == 0) { error('first'); } else { correct('first') }
    }
    $('last').onkeyup = function() {
        if ($('last').get('value').clean().length == 0) { error('last'); } else { correct('last') }
    }
    $('refer').onkeyup = function() {
            if ($('refer').get('value').clean().length == 0) { error('refer'); } else { correct('refer') }
    }

    $('appForm').addEvent('submit', function(e) {
        e.stop();
        var foundError = '';

        if ($('first').get('value').clean().length == 0) { error('first'); foundError += '<span>A <strong>first name</strong> is required.</span>'; } else { correct('first') }
        if ($('last').get('value').clean().length == 0) { error('last'); foundError += '<span>A <strong>last name</strong> is required.</span>'; } else { correct('last') }
        if ($('State').get('value') == "Default") {
            error('State'); foundError += '<span>Please select a <strong>state</strong>.</span>';
        } else {
            correct('State')
        }
        if ($('email').get('value').test(/^(?:\w+\.?)*\w+@(?:\w+\.)+\w+$/)) {
            correct('email')
        } else {
            error('email'); foundError += '<span>Your <strong>email address</strong> does not look valid.  Please use a valid address.</span>';
        }
        if ($('phone').get('value').test(/^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/)) {
            correct('phone')
        } else { error('phone'); foundError += '<span>Your <strong>phone number</strong> does not look valid.  Please use format XXX-XXX-XXXX.</span>'; }
        if ($('refer').get('value').clean().length == 0) { error('refer'); foundError += '<span>A <strong>referer</strong> is required.</span>'; } else { correct('refer') }

        if (foundError.length > 0) {
            ajaxMsg(foundError)
        } else {
            appSubmit.send();
        }
    });
    $('formError').set('tween', { duration: 2000 });
    var appSubmit = $('appForm').set('send', {
        url: 'submit.php',
        onRequest: function() { wait(true); ajaxMsg('Submitting app...'); $('submitBtn').set('html', 'Submitting...').addClass('DisabledButton').disabled = true; },
        onSuccess: function(o) {
            var jo = JSON.decode(o);
            if (jo) {
                if (jo.success) {
                    $('formError').set('html', '&nbsp;');
                    show('Thanks');
                    didSubmit = true
                } else if (jo.error) {
                    show('Error');
                    $('errorText').set('html', jo.error);
                }
            } else {
                show('Error');
                $('errorText').set('html', 'AJAX error');
            }
            $('submitBtn').set('html', 'Already submitted');
            wait();
        }
    })
})
var wait = function(on) {
    if (on) {
        $('wait').setStyle('visibility', 'visible')
    } else {
        $('wait').setStyle('visibility', 'hidden')
    }
}
var show = function(what) {
    $$('.content').each(
		        function(area) {
		            if (what == 'App' && didSubmit == true) {
		            	area.setStyle('display', 'none');
		            	$('ThanksBody').setStyle('display', 'block')
		            } else if (what + 'Body' == area.get('id')) {
		                area.setStyle('display', 'block')
		            } else {
		                area.setStyle('display', 'none')
		            }
		        }
		    )
}

var delayVar
var ajaxMsg = function(str) {
	var el = $('formError');
	var fx = el.get('tween');

	$clear(delayVar);
	fx.cancel();
	el.setStyle('opacity', 1);
	el.set('html', str);
	el.highlight('#fff47f');
	delayVar = (function() { fx.start('opacity', 0) }).delay(15000);
}
var error = function(el) {
	$(el).setStyle('border', '1px solid red');
}
var correct = function(el) {
	$(el).setStyle('border-color', '#c4c4b8 #e5e5db #e6e6dc #c4c4b8');
}