// JavaScript Document
$('#contact-form-text').html(
	'<h1>Contact Us</h1>'+
	'<p id="contact-response"></p>'+
	'<div id="contact-text"><p>Complete the form below to have someone contact you.</p>'+
	'<form id="contactForm" method="post" action="processor.php" onsubmit="return false">'+
		'<fieldset>'+
			'<legend>Contact Information</legend>'+
			'<div class="error" id="fullNameErr"></div>'+
			'<div class="field"><label>Full Name</label><input type="text" name="Full_Name" id="fullName" value="" size="30" /></div>'+
			'<div class="error" id="companyErr"></div>'+
			'<div class="field"><label>Company/Organization</label><input type="text" name="Company_Name" id="company" value="" size="30" /></div>'+
			'<div class="error" id="emailErr"></div>'+
			'<div class="field"><label>Email Address</label><input type="text" name="Email_Address" id="email" value="" size="30" /></div>'+
			'<div class="error" id="phoneErr"></div>'+
			'<div class="field"><label>Phone</label><input type="text" name="Phone" id="phone" value="" size="30" /></div>'+
		'</fieldset>'+
		'<fieldset>'+
			'<legend>What are you thinking?</legend>'+
			'<div class="field"><label>Message</label><textarea name="Message" id="message"></textarea></div>'+
			'<input type="submit" value="Submit" />'+
		'</fieldset>'+
	'</form></div>');

$('#contact-form .close').bind('click',closeContact);
$('#capInfo a').bind('click',loadContact);

function loadContact(e) {
	e.preventDefault();
	$('#contact-form-overlay').fadeTo(750,0.9);
	$('#contact-form').css('opacity',0)
	toggleContactForm($('#contact-form'),0,1,'-=100',750);
}


function closeContact() {
	$('#contact-form-overlay').fadeOut(750);
	toggleContactForm($('#contact-form'),0,0,'+=100',750);
}

function toggleContactForm($object,delay,opacity,pos,dur) {
	 if(opacity > 0 && $object.css('display') == 'none') {
		$object.css('display','block')
	 }
    $object.delay(delay).animate({ opacity:opacity, top:pos },{duration:dur,easing:'easeOutExpo',complete:(opacity ? removeOpacity : null)});
}

function removeOpacity() {
	$(this).css('opacity','')
}

$('.field input,.field textarea').focus( function() { $(this).siblings('label').html(''); });
$('.field label').bind('click', function() { $(this).siblings('input').html(''); $(this).siblings('input').focus() });
$('.field input[name="Full_Name"]').blur( function() { if (!$(this).val()) { $(this).siblings('label').html('Full Name'); } });
$('.field input[name="Company_Name"]').blur( function() { if (!$(this).val()) { $(this).siblings('label').html('Company'); } });
$('.field input[name="Email_Address"]').blur( function() { if (!$(this).val()) { $(this).siblings('label').html('Email Address'); } });
$('.field input[name="Phone"]').blur( function() { if (!$(this).val()) { $(this).siblings('label').html('Phone'); } });
$('.field textarea[name="Message"]').blur( function() { if (!$(this).val()) { $(this).siblings('label').html('Message'); } });

$(document).ready(function() { 
    var options = { 
        target:        '#contact-response',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 
 
        // other available options: 
        dataType:  'json'        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
 
    // bind to the form's submit event 
    $('#contactForm').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
});

function showRequest(formData, jqForm, options) {
	var valid = true;
	
	if (!$('#fullName').val()) {
		$('#fullNameErr').html('Please enter your name.');
		valid = false;
	}
	
	if (!$('#company').val()) {
		$('#companyErr').html('Please enter your company or organization name.');
		valid = false;
	}
	
	if (!$('#email').val()) {
		$('#emailErr').html('Please enter your email address.');
		valid = false;
	}
	
	if (!$('#phone').val()) {
		$('#phoneErr').html('Please enter your phone number.');
		valid = false;
	}
	
	if (valid == false) {
		return false;
	} else {
		return true;
	}
}

function showResponse(responseText, statusText, xhr, $form) {
	if (!responseText.valid) {
		if (responseText.Full_Name) {
			$('#fullNameErr').html(responseText.Full_Name);
			valid = false;
		}
		
		if (responseText.Email_Address) {
			$('#emailErr').html(responseText.Email_Address);
			valid = false;
		}
		
		if (responseText.Phone) {
			$('#phoneErr').html(responseText.Phone);
			valid = false;
		}
		
		if (responseText.Company_Name) {
			$('#companyErr').html(responseText.Company_Name);
			valid = false;
		}
	} else {
		$('#contact-response').text('We received your submission.');
		$('#contact-text,#contactForm').remove()
	}
}