/*
 * http://0x00ff00.com
 * 23-11-2009	v0.9	initial release
 */

var NAME = "Name";
var EMAIL = "E-mail";
var MESSAGE = "Type your message here...";
var THANKS = "Thank you for the message!<br /><br />I will respond soon.";
var form;
var options;

$.fn.makeContactForm = function(ops) {
	
	var defaults = { 
		fontSize : "14px",
		messageBoxRows : "10"
	};
	options = $.extend(defaults, ops);

	return this.each(function() {
		form = $(this);
		doInitialize();
	});
};


function doInitialize() {
	form.html('<div><input name="name" type="text"/><br /><input name="email" type="text"/><br /><textarea name="message"></textarea><br /><input type="submit" value="Send Message"/><span id="thanksMessage"></span></div>');
	
	var container = $("div", form);
	var nameBox = $("div input[type='text']:first", form);
	var emailBox = $("div input[type='text']:last", form);
	var messageBox = $("div textarea", form);
	var button = $("div input[type='submit']", form);
	var thanksMessage = $("div span", form);	
	
	// style
	container.css({"marginTop": "5px", "marginBottom" : "10px", "textAlign" : "center"});
	nameBox.css({"width": "100%", "marginTop": "5px", "borderWidth": "1px", "fontSize" : options.fontSize, "fontFamily" : "arial, helvetica, sans-serif", "color" : "gray"});
	emailBox.css({"width": "100%", "marginTop": "5px", "borderWidth": "1px", "fontSize" : options.fontSize, "fontFamily" : "arial, helvetica, sans-serif", "color" : "gray"});
	messageBox.css({"width": "100%", "marginTop": "5px", "borderWidth": "1px", "overflow" : "auto", "fontSize" : options.fontSize, "fontFamily" : "arial, helvetica, sans-serif", "color" : "gray"});		
	button.css({"width": "100%", "marginTop": "5px", "fontFamily" : "arial, helvetica, sans-serif"});
	thanksMessage.css({"width": "100%", "marginTop": "5px", "fontSize" : options.fontSize, "fontFamily" : "arial, helvetica, sans-serif", "display" : "none"});
	
	// content
	nameBox.val(NAME);
	emailBox.val(EMAIL);
	messageBox.val(MESSAGE);
	messageBox.attr("rows", options.messageBoxRows);
	thanksMessage.html(THANKS);
	
	// behavior
	nameBox.click(function() { doClick(this, NAME); });
	nameBox.blur(function() { doBlur(this, NAME); });
	nameBox.focus(function() { doFocus(this, NAME); });
	emailBox.click(function() { doClick(this, EMAIL); });
	emailBox.blur(function() { doBlur(this, EMAIL); });	
	emailBox.focus(function() { doFocus(this, EMAIL); });	
	messageBox.click(function() { doClick(this, MESSAGE); });
	messageBox.blur(function() { doBlur(this, MESSAGE); });
	messageBox.focus(function() { doFocus(this, MESSAGE); });
	
	button.click(
		function() {
			var numErrors = 0;
			
			var nameVal = nameBox.val();
			if ((nameVal == "") || (nameVal == NAME)) {
				nameBox.css("color", "red");
				numErrors++;
			}
			var emailVal = emailBox.val();
			if ((emailVal == "") || (emailVal == EMAIL)) {
				emailBox.css("color", "red");
				numErrors++;
			}				
			var messageVal = messageBox.val();
			if ((messageVal == "") || (messageVal == MESSAGE)) {
				messageBox.css("color", "red");
				numErrors++;
			}
			
			if (numErrors == 0) {
				var urlStr = form.attr("action");
				var dataStr = "name="+nameVal+"&email="+emailVal+"&message="+messageVal;

				$.ajax({
					type: "POST",
					url: urlStr,
					data: dataStr,
					success: function() {
						doThanks(container);
						setTimeout("doInitialize()", 10000);
					},
					error: function() {
						emailBox.css("color", "red");
					}
				});
			}
			return false;
		}
	);	
}


function doThanks(container) {
	$("input", container).hide();
	$("textarea", container).hide();
	$("#thanksMessage", container).show();
}


function doClick(elem, value) {
	var currentVal = $(elem).val();
	if (currentVal == value) {
		$(elem).val("");
	}
	$(elem).css("color", "black");	
}


function doFocus(elem, value) {
	doClick(elem, value);
}


function doBlur(elem, value) {
	var text = $(elem).val();
	if ((text == "") || (text == value)) {
		$(elem).val(value);
		$(elem).css("color", "gray");
	}	
}