window.location.href, defaultvalues = new Array();
defaultvalues['name'] = 'your name';
defaultvalues['email'] = 'your email address';
defaultvalues['phone'] = 'phone number (w/ area code)';
defaultvalues['subject'] = 'subject';
defaultvalues['message'] = 'how can I be of service?';  


function checkForm(e) {
   // Stop the actual form submission
   Event.stop(e);

   if (validateFields()) {
      Effect.Fade('contact_form_container', {
         afterFinish:function(obj){
            // Submit form with Ajax
            // parameters: 'ajax=1&'+obj.element.serialize(),
            new Ajax.Request(   
               window.location.href,
               {                        
                  method: 'post',               
                  parameters: Form.serialize('contact_form'),
                  onSuccess: function(res,json) {
                     obj.element.innerHTML='<div class="contact_form_container"><h2>Thanks for reaching out!<'+'/h2>  <p>We\'ll talk to you soon.<'+'/p><'+'/div>';

                     window.setTimeout(function(){Effect.Appear(obj.element);}, 250);
                  },                            
                  onFailure: function() {       
		     alert('http response is: ' + http.responseText);
                     //alert('Sorry, that failed for some reason.  Please try calling or e-mailing using the information below.');
		   }
               }                                
            );                          
         }                      
      });               
   }            
}       


function validateFields(fieldName) {
	var ok=true;
	//alert('validateFields got: ' + fieldName + '.');
	if (!fieldName||fieldName=='name')
		if (!$F('name')||$F('name')==defaultvalues['name']) {Effect.Shake('name'); ok=false;}
	if (!fieldName||fieldName=='email')
		if (!$F('email')||$F('email')==defaultvalues['email']||
			!$F('email').match('^([^@]+)@([^@]+)(\.[a-z]+)$')) {Effect.Shake('email'); ok=false;}
	if (!fieldName||fieldName=='phone')
		if (!$F('phone')||$F('phone')==defaultvalues['phone']) {Effect.Shake('phone'); ok=false;}
	if (!fieldName||fieldName=='subject')
		if (!$F('subject')||$F('subject')==defaultvalues['subject']) {Effect.Shake('subject'); ok=false;}
	if (!fieldName||fieldName=='message')
		if (!$F('message')||$F('message')==defaultvalues['message']) {Effect.Shake('message'); ok=false;}

	$('contact_form_container').innerHTML='<div class="contact_form_container" style="text-align: left;"><h2>Form is broken<'+'/h2><br /><p style="text-align: left;">I\'m very sorry about this but my contact form is currently not working. Please try calling me at 403-431-0881 or sending email to <a href="mailto:contact@netmojo.ca">contact@netmojo.ca</a> instead.<'+'/p><'+'/div>';

	return ok;
}

Event.observe(window, 'load', function() {
	//alert('Observed: window loaded!');

	Event.observe('contact_form', 'submit', checkForm);
	var fields = $$('.hasdefault');
	for (var i=0; i<fields.length; i++) {

		Event.observe($(fields[i]), 'focus', function(evt){
			var el = Event.element(evt);
			if (el.value==defaultvalues[el.id]) {
				el.morph('color:'+el.getStyle('backgroundColor')+';', {
					duration: .15,
					afterFinish: function(obj){
						obj.element.value='';
						obj.element.setStyle({color: fieldColor});
					}
				});
			}
		});
		Event.observe($(fields[i]), 'blur', function(evt){
			var el = Event.element(evt);
			if (el.value=='') {
				el.setStyle({color: el.getStyle('backgroundColor')});
				el.value=defaultvalues[el.id];
			}
			validateFields(el.id);
			el.morph('color:'+fieldColor+';', {
				duration:.5
			});
		});

		if (fields[i].value=='') fields[i].value=defaultvalues[fields[i].id];
		fieldColor = fields[i].getStyle('color');
	}
});